使用 Jest 状态测试 Vuex 突变不会改变答案

【问题标题】：Testing Vuex Mutations with Jest state does not change使用 Jest 状态测试 Vuex 突变不会改变
【发布时间】：2022-02-02 00:15:45
【问题描述】：

我有一个命名空间的 Vuex 模块，我正在尝试使用 Jest 进行测试，在对我的模拟状态进行突变后，它似乎没有改变。

这是我的 addEvents 突变

   addEvents: (state, infos) => {
      try {
        state.events = state.events.concat(infos);
      } catch (error) {
        console.error("[ERR vuex event set] ", e.message);        
      }

event.test.js

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

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

describe('event', () => {
  //intial state
  const state = {
    events: []
  }

  const newEvent = {
    text: 'Hello',
    eventCode: 'importantEvent'
  }

  //mutate
  event.commit('event/addEvents', newEvent);
  expect(state.events).toContainEqual(newEvent)
})
})

我正在从包含许多模块的商店索引中导入。我想我正确地引用了我想要的商店。当我尝试导入我想要测试的特定模块时，我的测试无法找到我的突变。

我的笑话输出返回

 FAIL  vue/vuex/modules/event.test.js
  ● event › encountered a declaration exception

    expect(received).toContainEqual(expected) // deep equality

    Expected value: {"eventCode": "importantEvent", "text": "Hello"}
    Received array: []

      20 |   //mutate
      21 |   event.commit('event/addEvents', newEvent);
    > 22 |   expect(state.events).toContainEqual(newEvent)
         |                        ^
      23 | })

      at Suite.<anonymous> (vue/vuex/modules/event.test.js:22:24)
      at Object.<anonymous> (vue/vuex/modules/event.test.js:9:1)

【问题讨论】：

state 是局部变量，与商店无关
@EstusFlask 所以我应该期待不同的价值吗？如果是这样呢？这家商店？
您发布的代码中没有this 如果event 是您可能需要断言event.state 的商店。您还需要以某种方式重置状态以使其可测试
@EstusFlask 谢谢！这修复了它，我的商店里已经有一个重置突变，所以我用它来重置测试。

标签： javascript vue.js testing jestjs vuex

【解决方案1】：

感谢 Estus Flask 帮助我找出我的问题是没有正确引用存储。这是我正在使用的代码，包括我已经存在的重置路线。为清楚起见，将我的事件导入重命名为 store。

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

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


describe('event mutations', () => {
  beforeEach(() => {
    //resets state beforeEach
    store.commit("event/reset");
  });

  it('adding events works', () => {
    const newEvent = {
      text: 'Hello',
      eventCode: 'importantEvent'
    };
  
    //mutate
    store.commit('event/addEvents', newEvent);
    expect(store.state.event.events).toContainEqual(newEvent);
  });

  it('store resets properly between tests and reset works', () => {
    expect(store.state.event.events).toHaveLength(0);
  });
})

【讨论】：