expect 方法读取错误值 wrapper.vm.shown

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 在作为参数传递给 expect 方法时是 undefined，而在通过 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 有时会延迟记录值，这意味着它们不会是您在该行执行时期望的值。 See this post.

expect 方法读取错误值 wrapper.vm.shown

expect methods reads a wrong value of wrapper.vm.shown

javascript

karma-runner

vue.js

avoriaz