测试 VueX 商店

Question

我正在尝试测试 VueX 商店的不同部分。我在单个文件 (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: Cannot read property 'mutatePickedDates' of undefined 当运行测试时。

Answer 1

有两种测试 vuex 的方法。第一个是对动作、突变和吸气剂进行单元测试。二是直接测试working store。

单元测试突变

如果您想测试从组件中分离出来的商店变更，我建议将它们导出。

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

测试 VueX 商店

Testing VueX store

vue.js

jestjs

vuex

vue-test-utils

单元测试突变

使用有效的 Vuex 商店