vue.js - 测试 VueX 商店

Question

我正在尝试测试 VueX 商店的不同部分。我将突变、 setter/getter 等保留在单个文件(index.js)中，但不知怎的，当将该文件导入到测试文件中时它不起作用。 这是我的 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:运行测试时无法读取未定义的属性“mutatePickedDates”。

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)
})