CODEWITHSUNDEEP
vue.jsvuexvue-test-utils
Matthew T
Matthew T

Reputation: 93

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

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?

Upvotes: 1

Views: 3763

Answers (2)

Matthew T
Matthew T

Reputation: 93

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.

Upvotes: 0

Kuba Janik
Kuba Janik

Reputation: 333

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 () => {

Upvotes: 3

Related Questions