vuex 모듈 사용 시 돌연변이를 테스트하는 방법

vuex 모듈 사용 시 돌연변이를 테스트하는 방법

vuex 모듈을 사용하기 전에 변환 테스트는 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/modules/../index.filename 파일

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

vuex/module/model/index.model

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/snots/vuex/snots/index.spec.snots.snots.g

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 { mutiations }문을 변경하여 모듈이 정의되어 있는 store.js를 직접 Import하여 store를 사용하려고 했습니다._filename,

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

매장 사용._disclosparam.IS_AUTHENTICATED0은 동작하고 있는 것 같습니다(배열이 왜 그런지 알 수 없습니다). 그러나 테스트에 합격하지 못했기 때문에 이 함수와 상태 payload arg에 문제가 있습니다.

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 파일의 변환에 전달된 arg를 확인했습니다.

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 모듈을 사용하여 이 경우 돌연변이 테스트를 진행하는 방법은 무엇입니까?

피드백 감사합니다.

사실, 이것은 좋지 않은 접근법입니다.모의 상태를 생성하여 사용해야 합니다.

import { createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';    
import { storeModule } from '@path/to/store/modules';
const mutations = storeModule.mutations;


describe('mutations', () => {
  it('testCase#1', () => {
    createLocalVue().use(Vuex);
    const state = {
    //mock state values
    };

    const store = new Vuex.Store({state, mutations});

    store.commit('mutationToTest', arg);

    expect(state.arg).toBe(1);
  })
})

vuex 모듈을 사용하여 돌연변이를 테스트하는 방법을 찾아냈지만 그게 최선의 방법인지는 모르겠지만...

변환 핸들러를 직접 호출할 수 없고 vuex/store만 Import하기 때문에 store.commit을 사용하여 테스트는 매우 간단합니다.

src/test/unit/syslog/syslog/index.syslog

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

언급URL : https://stackoverflow.com/questions/47454518/how-to-test-mutations-when-using-vuex-modules