期望方法讀取錯誤的值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.