使用Vue Test Utils，我如何检查按钮是否被禁用？
使用Vue Test Utils，我如何检查按钮是否被禁用？
提问于 2021-12-02 23:07:18
我正在测试一个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'
}Stack Overflow用户
发布于 2021-12-03 04:43:39
测试可以直接从元素引用本身读取disabled值，该元素引用由测试包装器的element property公开
// expect(SubmitButton.attributes().disabled).toBe('true'); ❌
expect(SubmitButton.element.disabled).toBe(true); ✅页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70207571
复制相关文章
相似问题
腾讯云开发者
