如何在使用vuex模块时测试突变

在使用vuex模块之前，我的突变测试没问题：

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', () => {
  var state
  beforeEach(() => {
    state = {
      isAuthenticated: vueAuthInstance.isAuthenticated(),
      currentUserId: ''
    }
  })

  describe('IS_AUTHENTICATED', () => {
    it('should set authentication status', () => {
      state.isAuthenticated = false
      mutations[IS_AUTHENTICATED](state, {isAuthenticated: true})
      expect(state.isAuthenticated).to.eql(true)
    })
  })
  ...

})

现在我重构了我的vuex文件夹，我的状态和突变都在每个vuex / modules /../ index.js文件中

src
       |_  vuex
       |    L_ modules
       |           L_ login
       |               |_ index.js
       |               |_ actions.js
       |               |_ getters.js
       |               |_ mutation_types.js
       |_ App.vue
       |_ main.js

vuex/modules/login/index.js

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
}

与vuex / store.js

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

考虑到这个新结构，我重写了单元测试如下：

test/unit/specs/vuex/modules/login/index.spec.js

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', () => {
  var state
  beforeEach(() => {
    state = {
      isAuthenticated: vueAuthInstance.isAuthenticated(),
      currentUserId: ''
    }
  })

  describe('IS_AUTHENTICATED', () => {
    it('should set authentication status', () => {
      state.isAuthenticated = false
      mutations[types.IS_AUTHENTICATED](state, {isAuthenticated: true})
      expect(state.isAuthenticated).to.eql(true)
    })
  })

})

在变异上我得到一个错误：

✗ should set authentication status
    TypeError: Cannot read property 'IS_AUTHENTICATED' of undefined

我尝试更改import 语句，并直接导入store.js，其中定义了模块，并使用store._mutations，

LOG: 'MUTATIONS: ', Object{IS_AUTHENTICATED: [function wrappedMutationHandler(payload) { ... }], ...}

使用store._mutations.IS_AUTHENTICATED0，似乎工作，（不知道为什么一个数组？..）但这个函数和状态，有效负载args的问题，因为测试没有通过

import store from '@/vuex/store'
import vueAuthInstance from '@/services/auth.js'

describe('mutations.js', () => {
  var state
  beforeEach(() => {
    state = {
      isAuthenticated: vueAuthInstance.isAuthenticated(),
      currentUserId: ''
    }
  })

  describe('IS_AUTHENTICATED', () => {
    it('should set authentication status', () => {
      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

我检查了传递的args到index.js文件中的变异

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

和 . 我没有看到传递的arg值，似乎状态args是我测试中唯一传递的值：

LOG: 'MUTATION state: ', Object{isAuthenticated: false, currentUserId: ''}
LOG: 'MUTATION payload: ', Object{isAuthenticated: false, currentUserId: ''}

这段代码出了什么问题？如何使用vuex模块继续测试这种情况下的突变？

谢谢你的反馈