Как проверить изменение состояния VueX в компоненте с помощью vuex-test-utils? - PullRequest
Новая
       9

Как проверить изменение состояния VueX в компоненте с помощью vuex-test-utils?

0 голосов
/ 11 марта 2020

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

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

Загрузка - это вычисленное значение, которое поступает из магазина. Я хочу проверить его с помощью следующего сценария тестирования: 

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

Часть после store.commit ('finishLoading') не выполняется. Как запустить обновление компонента на основе данных магазина?

Ответы [ 2 ]

1 голос
/ 11 марта 2020

Попробуйте добавить эту строку после store.commit ('finishLoading') . 

await wrapper.vm.$nextTick();

И не забудьте сделать свою функцию asyn c. 

test('Calls store action for data and then shows the page', async () => {
0 голосов
/ 12 марта 2020

Я узнал позже, что я тоже пропустил одну вещь! Мой магазин - namespaced , поэтому, естественно, поскольку я не создаю для него NamespacedHelper, мне нужно вызвать следующую мутацию: 

store.commit('applicationApply/finishLoading');

Это дополнение к действительному исправлению выше , что решает главный вопрос.

...