How to test VueX state change in the component using vuex-test-utils?

Question

I have a very simple component that relies on the data from the backend being loaded in the store, and I wan to write a unit test for this flow. Basically, my template code is:

    <div class="my-component">
        <div class="loading-screen" v-if="loading"></div>
        <div class="content" v-if="!loading"></div>
    </div

Loading is a computed value that comes from the store. I want to test it with the following test scenario:

    describe('My Component', () => {
        let wrapper;
        let actions;
        let store;
        let state;
        let mutations;

    beforeEach(() => {
        actions = {};
        state = {
            loading: true,
        };
        mutations = {
            finishLoading: (state) => { state.loading = false },
        };
        store = new Vuex.Store({
            modules: {
                myModule: {
                    namespaced: true,
                    state,
                    actions,
                    mutations,
                }
            }
        });
    });

    test('Calls store action for data and then shows the page', () => {
        wrapper = mount(MyComponent, { store, localVue });
        expect(wrapper.find('.loading-screen').isVisible()).toEqual(true);
        expect(wrapper.find('.content').exists()).toEqual(false);
        store.commit('finishLoading');
        expect(wrapper.find('.loading-screen').exists()).toEqual(false);
        expect(wrapper.find('.content').isVisible()).toEqual(true);
    });
    });

The part after store.commit('finishLoading') fails. How can I trigger the component to update based on the store data?

Kuba Janik · Accepted Answer · 2020-03-11 14:38:19Z

3

Try to add this line after store.commit('finishLoading').

await wrapper.vm.$nextTick();

And remember to make your function async.

test('Calls store action for data and then shows the page', async () => {

answered Mar 11, 2020 at 14:38

Kuba Janik

3332 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew T · Accepted Answer · 2020-03-12 08:41:11Z

0

I found out later that I also missed one thing! My store is namespaced, so naturally as I don't create a NamespacedHelper for it, I need to call the following mutation:

store.commit('applicationApply/finishLoading');

This is an addition to the valid fix above, which resolves the main question.

answered Mar 12, 2020 at 8:41

Matthew T

934 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to test VueX state change in the component using vuex-test-utils?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related