使用 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

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

// expect(SubmitButton.attributes().disabled).toBe('true'); ❌
expect(SubmitButton.element.disabled).toBe(true); ✅