vuex 클래스를 사용하는 Vue 구성 요소를 테스트하는 방법

vuex 클래스를 사용하는 Vue 구성 요소를 테스트하는 방법

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {Action, Getter, namespace} from 'vuex-class';
    import {User} from '@/types/userTypes';

    const userModule = namespace('user');

    @Component({
        name: 'Header'
    })

    export default class Header extends Vue {
        data: any;

        @userModule.Getter user!: User;

    }
</script>

위의 코드는 사용자 데이터를 표시하기 위해 Getter/namespace를 사용하는 단순한 Header 컴포넌트입니다.

문제는 어떻게 이 문제를 조롱하느냐이다.namespace('user', Getter)

테스트 실행 결과:

[Vue warn]: Error in render: "TypeError: Cannot read property '_modulesNamespaceMap' of undefined"

이것을 조롱하는 방법의 샘플이 있으면 공유해 주세요.

import {createLocalVue, shallowMount} from '@vue/test-utils';
import Vuex from 'vuex';
import Header from '@/components/Header.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

const getters = {
    user: jest.fn()
};

const store = new Vuex.Store({
    modules: {
        user: {
            namespaced: true,
            getters
        }
    }
});

describe('Header.vue', () => {
    it('Instantiate component', () => {
        const wrapper = shallowMount(Header, {
            store,
            localVue
        });
        expect(wrapper.isVueInstance()).toBeTruthy();
    });
});

언급URL : https://stackoverflow.com/questions/59245479/how-to-unit-test-a-typescript-vue-component-that-uses-vuex-class