如何使用Vue Test Utils测试按钮disabled属性状态

断言失败核心原因 #

• HTML规范中disabled是原生布尔属性：只要该属性挂载在DOM元素上，无论属性值是"false"、空字符串还是其他内容，元素都会被判定为禁用状态；只有属性完全从DOM上移除时，元素才是启用状态，不存在属性值为"false"代表启用的逻辑。
• Vuetify的v-btn组件遵循上述规则：当传入disabled={false}时，组件不会在最终渲染的DOM节点上挂载disabled属性，而不是给属性赋值为"false"。
• 调用wrapper.setData后Vue的DOM更新是异步流程，未等待更新完成就读取属性，也可能拿到旧的渲染结果。

正确测试写法 #

首先确保测试用例函数支持异步（加async关键字），等待状态更新完成后再做断言，不要判断disabled属性值等于字符串'false'，参考以下代码：

// 等待响应式更新、DOM重绘完成
await wrapper.setData({ isFormModified: true, isFormValid: true })
const button = wrapper.find('[data-qa="reviewData"]')

// 两种断言方式选其一即可
// 方式1：读取原生DOM的disabled布尔属性（最准确，不受属性渲染规则影响）
expect(button.element.disabled).toBe(false)

// 方式2：判断disabled属性不存在于元素属性集合中
expect(button.attributes('disabled')).toBeUndefined()

可以补充覆盖全部分支场景的测试逻辑，确保状态联动符合预期：

// 任意一个状态为false时，按钮都应为禁用状态
await wrapper.setData({ isFormModified: false, isFormValid: true })
expect(button.element.disabled).toBe(true)

await wrapper.setData({ isFormModified: true, isFormValid: false })
expect(button.element.disabled).toBe(true)

await wrapper.setData({ isFormModified: false, isFormValid: false })
expect(button.element.disabled).toBe(true)

注意：如果使用的是VTU v1 + Vue 2版本，若await setData不生效，可以替换为await wrapper.vm.$nextTick()等待DOM更新。

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