はvuexモジュールを使用する前にvuexモジュール

Question

を使用した場合の変異をテストするために、どのように、私の突然変異試験はOKだった：

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フォルダをリファクタリング/../ index.jsファイル

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

vuex /モジュール/ログイン/ 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) 
    } 
}) 

、私は次のようにユニットテストを書き直し：

テスト/ユニット/スペック/ vuex /モジュール/ログイン/インデックス。 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 

Iインポート{変異}ステートメントを変更しようとし、直接モジュールが定義されているstore.jsを、インポート、およびstore._mutationsを使用し、store._mutations.IS_AUTHENTICATED0を用い

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

、動作するように思われます、（なぜ配列なのか分からない？ ...）しかし、何かがテストが

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 

に合格しないと、私は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 
    } 
} 

を通過した引数を確認し、この機能や状態、ペイロード引数と間違っています

そして。

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

このコードで何が問題になっています：私は渡された引数の値が表示されていない、国家の引数は、私のテストからのみ渡された値であると思われますか？この場合、突然変異をテストするために、どのようにvuexモジュールを使用して進めますか？フィードバック

Answer 1

ため

おかげで私はvuexモジュールを使用して突然変異をテストする方法を発見し、それが最善の方法だ場合、私は知らない...

私のテストは、ストアを使用して、非常に簡単です。私は突然変異ハンドラを直接呼び出すことはできませんとしてコミットし、私はvuex /ストアに

のsrc /テスト/ユニット/スペック/モジュール/ログイン/ index.jsをインポート

import store from '@/vuex/store' 

describe('mutations.js',() => { 
    describe('IS_AUTHENTICATED',() => { 
    it('should set authentication status',() => { 
     store.commit('IS_AUTHENTICATED', {isAuthenticated: true}) 
     expect(store.state.login.isAuthenticated).to.eql(true) 
    }) 
    }) 
    ... 
})