구성 요소 유닛 테스트에서 Vuex 모듈 동작 모킹

구성 요소 유닛 테스트에서 Vuex 모듈 동작 모킹

나는 현재 상점의 모듈 동작을 조롱하려 하고 있다.유닛 테스트에서 다음과 같은 메시지가 계속 표시되므로 올바르게 스터브할 수 없는 것 같습니다.

[vuex] unknown action type: moduleA/filterData

테스트 대상 컴포넌트의 간이 버전을 다음에 나타냅니다.

Item.vue

<template>
    <li class="list-item"
    @click="toggleActive()">
        {{ itemName }}
    </li>
</template>

<script>
import store from '../store'

export default {
    name: 'item',
    props: {
        itemName: {
            type: String
        }
    },
    data () {
        return {
            store,
            isActive: false
        }
    },

    methods: {
        toggleActive () {
            this.isActive = !this.isActive;
            this.$store.dispatch('moduleA/filterData', { name: itemName } );
        }
    }

}
</script>

store.displaces를 설정합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'

Vue.use(Vuex)



const store = new Vuex.Store({
    modules: {
        moduleA
    }
});

export default store;

모듈 A.js

/* imports */

const state = {
    /* state */
}

const mutations = {
    /* ... */
}

const actions = {

    filterData({ state, commit }, payload) {
        /* filter data and commit mutations */
    }
}

const getters = {
    /* getters */
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

Item.spec.js

import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { expect } from 'chai'
import sinon from 'sinon'
import Item from '../src/components/Item.vue'
import Vuex from 'vuex'

Vue.use(Vuex);

describe('Item.vue', () => {
    let componentProps = {};
    let wrapper;
    let actions;
    let store;
    beforeEach(() => {
        let name = 'Item Name';
        // mock vuex action on click
        actions = {
            filterData: sinon.stub()
        }

        let moduleA = {
            state: {},
            actions
        }

        store = new Vuex.Store({
            modules: {
                moduleA
            }
        });


        componentProps.itemName = name;
        wrapper = mount(Item, {
            store: store,
            propsData: componentProps
        });
    })

    it('Has a root element of list-item', () => {
        expect(wrapper.is('.list-item')).to.equal(true);
    })

    it('Item getting prop name', () => {
        expect(wrapper.text()).to.equal('Item Name');
    })

    it('Item is not active on load', () => {
        expect(wrapper.vm.$data.isActive).to.equal(false);
    })

    it('Item is active after click', () => {
        wrapper.trigger('click');
        expect(wrapper.vm.$data.isActive).to.equal(true);

    })

    it('Item is not active after two clicks', () => {
        wrapper.trigger('click');
        wrapper.trigger('click');
        expect(wrapper.vm.$data.isActive).to.equal(false);
    })
})

이로 인해 테스트에 실패한 것은 아니지만 Vuex에서 모듈 액션을 적절히 모의/정지하는 방법을 찾을 수 없었습니다.어떤 도움이라도 감사합니다.

그래서 이것을 조사해 보니, 테스트에서 내 스토어가 이름표시를 받고 있다는 것을 정의하고 있지 않았기 때문에, 내 행동을 인식하지 못하고 있는 것이 판명되었다.

beforeEach(() => {
    let name = 'Item Name';
    // mock vuex action on click
    actions = {
        filterData: sinon.stub()
    }

    let moduleA = {
        namespaced: true,
        state: {},
        actions
    }

    store = new Vuex.Store({
        modules: {
            moduleA
        }
    });


    componentProps.itemName = name;
    wrapper = mount(Item, {
        store: store,
        propsData: componentProps
    });
})

이것을 포함시키고 나서, 제 잘못은 없어졌습니다.

언급URL : https://stackoverflow.com/questions/51313280/mocking-vuex-module-action-in-component-unit-test