Home > other >  Testing Vuex Mutations with Jest state does not change
Testing Vuex Mutations with Jest state does not change

Time:02-04

I have a namespaced Vuex module that I am attempting to test using Jest, after making the mutation to my mocked state it does not appear to change.

Here is my addEvents mutation

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

I am importing from my store index which has many modules in it. I think I am referencing my desired store properly. When I tried to import the specific module I wanted to test my test was unable to find my mutations.

My jest output 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)  

CodePudding user response:

Thanks to Estus Flask for helping me figure out my issue was not referencing store properly. This is the code I have that is working including my reset route which already existed. Renamed my event import to store for clarity.

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);
  });
})
  •  Tags:  
  • Related