期望方法读取包装程序.vm.show 的错误值

Question

>我正在测试我的 vuejs 组件，发生了一个非常奇怪的问题。

这是我的测试

import { mount } from 'avoriaz';

let wrapper = mount(MyComponent, { globals: {$route},});
it('the click changes the value of shown', () => {
// This passes
expect(wrapper.vm.shown).to.equal(false);
// the click on this element will turn shown value into true
wrapper.first('#my_link').trigger('click');
// the value of shown is indeed true now
console.log(wrapper.vm.shown); // LOG LOG: true
expect(wrapper.vm.shown).to.equal(true); // expected undefined to equal true
});

发生了什么，为什么shown作为参数传递给方法时undefinedexpect，而通过console.log显示时是布尔值？

Answer 1

当您第二次调用expect时，DOM 尚未完成更新。

使用$nextTick等待 DOM 更新后再调用expect：

wrapper.first('#my_link').trigger('click');
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.shown).to.equal(true);
});

---

使用异步代码时，console.log有时会延迟记录值，这意味着它们不会是该行执行时所期望的值。请参阅此帖子。