用 Jest 状态测试 Vuex Mutations 不会改变

Question

我有一个命名空间 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)
})
})

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

我的笑话输出returns

 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)

Answer 1

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

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

用 Jest 状态测试 Vuex Mutations 不会改变

Testing Vuex Mutations with Jest state does not change

javascript

testing

vue.js

jestjs

vuex