vue.js - 测试VueX商店

Question

我正在尝试测试VueX商店的不同部分。我在单个文件(index.js)中保留了变异，getter和其他信息，但是当将该文件导入测试文件时，它不起作用。
这是我的VueX:
Vue.use(Vuex);
Index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);


export default new Vuex.Store({
  state: {
    pickedDates:[]
  },
  mutations: {
    mutatePickedDates: (state, payload) => {
      state.pickedDates = payload;
    },
})

现在在 Store.spec.js中，我要对其进行测试:

import storeConfig from '@/store/index.js'

const store = storeConfig


test('check if state is working', () =>{
    const state = {
        pickedDates: []
    }
    const dates = ['1995-01-01', '1995-01-01']
    store.mutations.mutatePickedDates(state, {dates})
    expect(state.pickedDates).toBe(dates)

})

但运行测试时出现错误: TypeError: Cannot read property 'mutatePickedDates' of undefined。

Answer 1

有两种测试vuex的方法。第一个是对 Action ，变异和 setter/getter 进行单元测试。其次是直接测试工作存储。

单元测试变异

如果要测试与组件隔离的商店突变，建议您导出它们。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const mutations = {
  mutatePickedDates: (state, payload) => {
    state.pickedDates = payload;
  }
};

export default new Vuex.Store({
  state: {
    pickedDates:[]
  },
  mutations: mutations
})

然后，您可以直接导入和测试突变。

import { mutations } from '@/store/index.js'

test('check if state is working', () =>{
    const state = {
        pickedDates: []
    }
    const dates = ['1995-01-01', '1995-01-01']
    mutations.mutatePickedDates(state, dates)
    expect(state.pickedDates.length).toBe(2)
})

使用正常的Vuex商店

import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import store from '@/store/index.js'

test('check if state is working', () =>{
    // initial state
    const state = {
        pickedDates: []
    }

    const dates = ['1995-01-01', '1995-01-01']

    // create local instance and vuex store
    const localVue = createLocalVue()
    localVue.use(Vuex)

    // commit mutation
    store.commit('mutatePickedDates', dates)

    expect(store.pickedDates.length).toBe(2)
})