使用 Vue Test Utils，如何检查按钮是否被禁用?

Question

我正在测试 Vue 组件，但在测试按钮的禁用状态时遇到问题。如何在测试中访问按钮的禁用状态？

我尝试使用.attributes()但在这种情况下，该方法仅返回未由v-bind设置的按钮属性。SubmitButton.attributes().disabled总是null.

元件

<button
id="edit-resource-modal-submit"
class="btn btn-sm btn-primary modal-button"
:disabled="loadingResource || !formValid"
@click="submit"
>
Save
</button>

测试

describe('Disables buttons if', () => {
beforeEach(async() => {
await wrapper.setProps({ isModalOpen: true });
});
it('modal is loading', async() => {
wrapper.vm.loadingResource = true;
const SubmitButton = wrapper.find('#edit-resource-modal-submit');
expect(SubmitButton.exists()).toBe(true);
expect(SubmitButton.attributes().disabled).toBe('true');
});
});

.attributes() 只返回

{
id: 'edit-resource-modal-submit',
class: 'btn btn-sm btn-primary modal-button'
}

Answer 1

选项 1：检查disabled属性

在 Vue 2 中，当元素实际被禁用时，disabled属性被设置为"disabled"(而不是"true")。在 Vue 3 中，它被设置为空字符串。启用元素时，属性本身是未定义的(即属性中不存在)。

为了与两个版本的 Vue 兼容，测试可以只检查是否定义了disabled属性。另请注意，测试应等待微刻度(通过await wrapper.vm.$nextTick())，以允许属性更改(wrapper.vm.loadingResource = true)在禁用按钮时生效：

const wrapper = shallowMount(MyComponent)
// update prop, and wait a tick to allow it to take effect
wrapper.vm.loadingResource = true
await wrapper.vm.$nextTick()
const button = wrapper.find('#edit-resource-modal-submit')
expect(button.attributes().disabled).toBeDefined()   

选项 2：检查disabled属性

测试可以直接从元素引用本身读取disabled属性，该属性由测试包装的element属性公开：

const wrapper = shallowMount(MyComponent)
// update prop, and wait a tick to allow it to take effect
wrapper.vm.loadingResource = true
await wrapper.vm.$nextTick()
const button = wrapper.find('#edit-resource-modal-submit')
expect(button.element.disabled).toBe(true)   

Vue 2 演示

Vue 3 演示

Answer 2

对于 vue 3 的 vue-test-utils，@tony19 的答案也有效。然而，它使用 vue-test-utils 的旧 api 用于 vue 2。

如您所见，如果启用了元素，则attributes()的返回值不包含disabled属性。所以我建议通过以下方式进行测试：

expect(SubmitButton.attributes('disabled')).toBeUndefined(); // enabled
expect(SubmitButton.attributes('disabled')).toBe("") // disabled