如何解决按钮的功能正确,但是单元测试报告错误
我可以正常使用页面上的按钮:
<template>
<div>
<span id='count'>{{count}}</span>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 10,}
},methods: {
increment() {
this.count++;
}
}
}
</script>
但是我的单元测试没有检测到按钮的效果。是因为我在单元测试中犯了一个错误,然后单击它来报告错误?
import { expect } from 'chai';
import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter';
describe('test::::',() => {
it('test1:::',() => {
const wrapper = mount(Counter);
expect(wrapper.find('#count').text()).to.be.equal('10');
wrapper.find('button').trigger('click');
expect(wrapper.find('#count').text()).to.be.equal('11');
});
});
错误消息:
AssertionError: expected '10' to equal '11'
解决方法
问题在于断言发生在click
处理程序的更改生效之前。
trigger()
方法返回一个Promise
来解析组件更新的时间,因此您可以进行测试回调async
,然后进行await
{{1} }通话:
trigger()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。