测试 VueX 商店

Posted 2023-02-22

【中文标题】测试 VueX 商店

【英文标题】：Testing VueX store

【发布时间】：2020-06-18 07:56:00

【问题描述】：

我正在尝试的不同部分。我将突变、吸气剂和其他内容保存在单个文件（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。

【参考方案1】：

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

单元测试突变

如果您想测试与组件隔离的存储突变，我建议您将它们导出。

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

【讨论】：

但是有没有办法在我上面介绍的设置中测试它们？

您有 2 个选项。我在答案中添加了第二个选项。参考：vue-test-utils.vuejs.org/guides/…

实际上在尝试使用第二个选项时出现错误。 [vuex] unknown mutation type: mutatePickedDates

ofc 你必须使用你定义的导出的 vuex 实例，而不是创建一个没有突变的实例。我调整了答案。但由于我没有你的代码，我无法测试它。如果您在此说明后无法运行，则应仔细阅读我发送的文档。 gl

如果上面的代码不起作用，你应该导出你传递给Vuex.Store()的初始对象，并在测试中直接创建store，而不是导出store。就像文档中的示例一样。