Ожидайте, что методы читают неправильное значение 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 является undefined когда передается в качестве аргумента expect метод и является логическим при отображении через console.log?

Answer 1

DOM не закончил обновление, когда вы звоните expect второй раз.

использование $nextTick ждать обновления DOM перед звонком expect:

wrapper.first('#my_link').trigger('click');

wrapper.vm.$nextTick(() => {
  expect(wrapper.vm.shown).to.equal(true);
});

---

При работе с асинхронным кодом, console.log иногда лениво записывает значения, что означает, что они не будут такими, как вы ожидаете в момент выполнения этой строки. Смотрите этот пост.