Тестирование Vue 2 с Мокко, данные обертки не меняются и не обновляются

#vue.js #unit-testing #mocha.js #chai

Вопрос:

Я пытаюсь интегрировать тесты в проект vue 2-cli,используется тестовая платформа Mocha и Chai. Есть очень полезное руководство, на которое я полагаюсь:

https://www.dotnetcurry.com/vuejs/1441/vuejs-unit-testing

Большинство тестов работают, но каждый раз, когда я изменяю данные на лету и ожидаю изменений на оболочке, оболочка вообще не обновляется. Например:

 describe('the onIncrease method', () => {
    let wrapper;
    let componentInstance;
    beforeEach(() => {
        wrapper = shallowMount(Counter, {
            propsData: {initialValue: 42},
        });
        componentInstance = wrapper.vm;
    });

    it('the counter value is increased by one', () => {
        componentInstance.onIncrease();
        expect(componentInstance.value).to.be.equal(43);
    });
    // this test passes and returns the correct 43
    it('the rendered output contains the value increased by one', () => {
        componentInstance.onIncrease();
        expect(wrapper.text()).to.include('Counter value: 43');
    });
    // this test fails with:
    // expected 'Counter value: 42' to include 'Counter value: 43'
});
 

Я работаю над этим в течение нескольких дней, и, надеюсь, кто-нибудь сможет подсказать, как получить обновленные данные. Есть картинка страницы с ошибкой, может быть, это полезно.

введите описание изображения здесь

Ответ №1:

Я не думаю, что это вообще возможно. Вы можете установить свойства по умолчанию и визуализировать компонент, но после этого вы сможете изменять и считывать только данные и вычисленные свойства, по крайней мере, в модульном тестировании.

Комментарии:

1. Спасибо за ваш ответ. Но я видел фрагмент в github, который работал, и в статье упоминалось, что он работает.

Ответ №2:

Проблема решена, она не удалась из-за неудачного выбора времени.

попробуйте установить таймер или воспользуйтесь функцией nextTick (): https://v3.vuejs.org/api/global-api.html#nexttick