使用Vue Test Utils测试时如何正确检测按钮的disabled禁用状态？

1. 修改响应式变量wrapper.vm.loadingResource后没有等待Vue完成DOM更新，直接读取的是未更新的DOM状态
2. attributes()方法仅能读取HTML标签上的静态属性，disabled这类动态绑定的布尔属性属于DOM元素的property，不会被attributes()捕获

推荐使用Vue Test Utils内置的isDisabled()方法判断元素禁用状态，该方法专门适配Vue的响应式更新逻辑，不需要手动处理属性映射。

修改后的测试代码如下：

describe('Disables buttons if', () => {
  beforeEach(async() => {
    await wrapper.setProps({ isModalOpen: true });
  });
  it('modal is loading', async() => {
    wrapper.vm.loadingResource = true;
    // 等待响应式变更同步到DOM
    await wrapper.vm.$nextTick();
    const SubmitButton = wrapper.find('#edit-resource-modal-submit');
    expect(SubmitButton.exists()).toBe(true);
    // 使用内置方法判断禁用状态
    expect(SubmitButton.isDisabled()).toBe(true);
  });
});

也可以直接访问原生DOM元素的disabled property实现判断：

expect(SubmitButton.element.disabled).toBe(true);

内容的提问来源于stack exchange，提问作者Jon_B