Search code examples
vue.jsunit-testingmocha.jschai

Vue 2 Testing with Mocha, wrapper data is not changing or updating

I'm trying to integrate tests in a vue 2-cli project,the test framework Mocha and Chai is used. There is a very helpful guide I'm relying on:

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

Most of the tests are working, but every time I'm changing the data on the fly and expecting the changes on the wrapper, the wrapper is not updated at all. For example:

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'
});

I'm working on this for days and hopefully anyone can give a hint on how to get the updated data. There is a picture of the error-page, maybe it's useful.

enter image description here

Solution

  • The Issue is solved, it failed because of bad timing.

    try to set a timer or use the nextTick() function: https://v3.vuejs.org/api/global-api.html#nexttick