Vuex-test-utils를 사용하여 구성 요소의 VueX 상태 변경을 테스트하는 방법

Vuex-test-utils를 사용하여 구성 요소의 VueX 상태 변경을 테스트하는 방법

나는 상점에 로드되는 백엔드의 데이터에 의존하는 매우 간단한 구성 요소를 가지고 있는데, 이 흐름에 대한 단위 테스트를 작성하고자 한다.기본적으로 내 템플릿 코드는 다음과 같다.

    <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') 이후의 부품이 실패함저장 데이터를 기준으로 구성 요소를 업데이트하도록 트리거하는 방법

store.commit('finishLoading') 뒤에 이 줄을 추가해 보십시오.

await wrapper.vm.$nextTick();

그리고 당신의 기능을 비동기적으로 만드는 것을 기억하라.

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

나 역시 한 가지를 놓쳤다는 것을 나중에 알게 되었어!내 상점은 이름 앞에 붙어서 자연스럽게 이름 앞에 붙이지 않는다.도우미, 다음 돌연변이를 불러야겠어

store.commit('applicationApply/finishLoading');

이것은 위의 유효한 수정안에 추가된 것으로, 주요 문제를 해결한다.

참조URL: https://stackoverflow.com/questions/60636852/how-to-test-vuex-state-change-in-the-component-using-vuex-test-utils