如何在mapState和mapGetters中使用嵌套路径测试Vue组件?

时间:2020-03-06 14:12:49

标签: vuex vue-test-utils

我不知道如何测试在计算属性中包含嵌套mapState的组件。 例如,如果存在诸如“ some / nested / paths /”之类的mapState,则shallowMount控制台中将显示“无法读取'vehicles ..'。

这是我的组成部分

computed: {
            ...mapState('vehicles/vehicle/settings', [
                'data',
                'pending',
                'unable_update_card_id'
            ]),
            ...mapGetters({
                cards: 'vehicles/cards/formatted_list'
            }),

还有我的测试

import {createLocalVue, shallowMount} from '@vue/test-utils';
import Vuex from 'vuex';
import vehicles from '@/store/modules/vehicles';
import settings from '@/store/modules/vehicles/vehicle/settings';
import {
    VEHICLE_SETTINGS_ACTIONS as ACTIONS
} from "@/store/modules/action-types";
import Settings from '@/views/vehicles/vehicle/Settings';
import clone from '@/util/functions/clone';

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


const createCmp = (store) => shallowMount(Settings, {
    localVue,
    store,
});

describe('Settings store', () => {
    let store;
    beforeEach(() => {
        store = new Vuex.Store(clone(settings));
    });

    it('set unable update', () => {
        store.commit('SET_UNABLE_UPDATE_CARD_ID');
        expect(store.state.unable_update_card_id).toEqual(true); // this test passes as there is only one module I cloned
    });

    it('set null card_id', () => {

        const cmp = createCmp(clone(vehicles)); // the "test" fails here as it couldn't resolve path
                                            // 'vehicles/vehicle/settings' and so on
    });
});

这是我第二天进行测试,因此某些构造可能无关紧要。

0 个答案:

没有答案