title: How to test mutations when using vuex modules
body: <p>Before using vuex modules , my mutation tests were OK :</p>
  
  <pre><code>import mutations from '@/vuex/mutations.js'
  import vueAuthInstance from '@/services/auth.js'
  import { IS_AUTHENTICATED, CURRENT_USER_ID } from '@/vuex/mutation_types.js'
  
  describe('mutations.js', () =&gt; {
    var state
    beforeEach(() =&gt; {
      state = {
        isAuthenticated: vueAuthInstance.isAuthenticated(),
        currentUserId: ''
      }
    })
  
    describe('IS_AUTHENTICATED', () =&gt; {
      it('should set authentication status', () =&gt; {
        state.isAuthenticated = false
        mutations[IS_AUTHENTICATED](state, {isAuthenticated: true})
        expect(state.isAuthenticated).to.eql(true)
      })
    })
    ...
  
  })
  </code></pre>
  
  <p>Now I refactored my vuex folders, my state and mutations are inside each vuex/modules/../index.js file</p>
  
  <pre><code>      src
         |_  vuex
         |    L_ modules
         |           L_ login
         |               |_ index.js
         |               |_ actions.js
         |               |_ getters.js
         |               |_ mutation_types.js
         |_ App.vue
         |_ main.js
  </code></pre>
  
  <p><strong>vuex/modules/login/index.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import actions from './actions'
  import getters from './getters'
  import * as types from './mutation_types'
  import vueAuthInstance from '@/services/auth.js'
  Vue.use(Vuex)
  
  const state = {
    isAuthenticated: vueAuthInstance.isAuthenticated(),
    currentUserId: ''
  }
  
  const mutations = {
    [types.IS_AUTHENTICATED]  (state, payload) {
      state.isAuthenticated = payload.isAuthenticated
    },
    ...
  }
  
  export default {
    state,
    mutations,
    actions,
    getters
  }
  </code></pre>
  
  <p>Withe a vuex/store.js</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import login from '@/vuex/modules/login'
  // import other modules
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    modules: {
      login,
      ... (other modules )
    }
  })
  </code></pre>
  
  <p>To take in account this new structure, I rewrote the unit test  as following :</p>
  
  <p><strong>test/unit/specs/vuex/modules/login/index.spec.js</strong></p>
  
  <pre><code>import { mutations } from '@/vuex/modules/login/index.js'
  import vueAuthInstance from '@/services/auth.js'
  import types from '@/vuex/modules/login/mutation_types.js'
  
  describe('mutations.js', () =&gt; {
    var state
    beforeEach(() =&gt; {
      state = {
        isAuthenticated: vueAuthInstance.isAuthenticated(),
        currentUserId: ''
      }
    })
  
    describe('IS_AUTHENTICATED', () =&gt; {
      it('should set authentication status', () =&gt; {
        state.isAuthenticated = false
        mutations[types.IS_AUTHENTICATED](state, {isAuthenticated: true})
        expect(state.isAuthenticated).to.eql(true)
      })
    })
  
  })
  </code></pre>
  
  <p>And I get an error, on the mutation :</p>
  
  <pre><code> ✗ should set authentication status
      TypeError: Cannot read property 'IS_AUTHENTICATED' of undefined
  </code></pre>
  
  <p>I tried to change the import { mutations } statement , and import directly the store.js, in which the modules are defined, and use store._mutations,</p>
  
  <pre><code>LOG: 'MUTATIONS: ', Object{IS_AUTHENTICATED: [function wrappedMutationHandler(payload) { ... }], ...}
  </code></pre>
  
  <p>using store._mutations.IS_AUTHENTICATED0 , seems to work, ( don't know why an array? ..) but something is wrong with this function and the state, payload args, as the test doesn't pass</p>
  
  <pre><code>import store from '@/vuex/store'
  import vueAuthInstance from '@/services/auth.js'
  
  describe('mutations.js', () =&gt; {
    var state
    beforeEach(() =&gt; {
      state = {
        isAuthenticated: vueAuthInstance.isAuthenticated(),
        currentUserId: ''
      }
    })
  
    describe('IS_AUTHENTICATED', () =&gt; {
      it('should set authentication status', () =&gt; {
        state.isAuthenticated = false
        console.log('MUTATIONS: ', store._mutations.IS_AUTHENTICATED())
        store._mutations.IS_AUTHENTICATED[0](state, {isAuthenticated: true})
        expect(state.isAuthenticated).to.eql(true)
      })
    })
    ...
  })
  
  
  1) should set authentication status
       mutations.js IS_AUTHENTICATED
       AssertionError: expected false to deeply equal true
  </code></pre>
  
  <p>I checked the passed args to the mutation in the index.js file</p>
  
  <pre><code>const mutations = {
    [types.IS_AUTHENTICATED]  (state, payload) {
      console.log('MUTATION state: ', state)
      console.log('MUTATION payload: ', payload)
      state.isAuthenticated = payload.isAuthenticated
    },
    [types.CURRENT_USER_ID]  (state, payload) {
      state.currentUserId = payload.currentUserId
    }
  }
  </code></pre>
  
  <p>And. I do not see the passed arg values, it seems that the state args is the only passed value from my test :</p>
  
  <pre><code>LOG: 'MUTATION state: ', Object{isAuthenticated: false, currentUserId: ''}
  LOG: 'MUTATION payload: ', Object{isAuthenticated: false, currentUserId: ''}
  </code></pre>
  
  <p>What's wrong with this code ? how to proceed for testing the mutations in this case, using vuex modules ?</p>
  
  <p>thanks for feedback</p>