VueX 저장소 테스트

VueX 저장소 테스트

나는 VueX 매장의 여러 부분을 테스트하려고 한다.나는 돌연변이, 게터 등을 하나의 파일(index.js)에 보관하지만, 그 파일을 테스트 파일로 가져올 때 어떻게 해서든 작동하지 않는다.여기 내 VueX: Vue.use(Vuex);

Index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);


export default new Vuex.Store({
  state: {
    pickedDates:[]
  },
  mutations: {
    mutatePickedDates: (state, payload) => {
      state.pickedDates = payload;
    },
})

자, 들어가!Store.spec.js테스트해 보고 싶음:

import storeConfig from '@/store/index.js'

const store = storeConfig


test('check if state is working', () =>{
    const state = {
        pickedDates: []
    }
    const dates = ['1995-01-01', '1995-01-01']
    store.mutations.mutatePickedDates(state, {dates})
    expect(state.pickedDates).toBe(dates)

})

하지만 나는 실수를 한다.TypeError: Cannot read property 'mutatePickedDates' of undefined테스트 실행 시

vuex 테스트에는 두 가지 방법이 있다.첫째는 시험 행동, 돌연변이, 게이터를 유닛화 하는 것이다.두 번째는 작업 스토어를 직접 테스트하는 것이다.

단위 테스트 돌연변이

구성 요소에서 분리된 돌연변이를 테스트하고 싶다면 내보내기를 권장한다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const mutations = {
  mutatePickedDates: (state, payload) => {
    state.pickedDates = payload;
  }
};

export default new Vuex.Store({
  state: {
    pickedDates:[]
  },
  mutations: mutations
})

그런 다음 돌연변이를 직접 가져와 테스트할 수 있다.

import { mutations } from '@/store/index.js'

test('check if state is working', () =>{
    const state = {
        pickedDates: []
    }
    const dates = ['1995-01-01', '1995-01-01']
    mutations.mutatePickedDates(state, dates)
    expect(state.pickedDates.length).toBe(2)
})

작업 중인 Vuex 스토어 사용

import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import store from '@/store/index.js'

test('check if state is working', () =>{
    // initial state
    const state = {
        pickedDates: []
    }

    const dates = ['1995-01-01', '1995-01-01']

    // create local instance and vuex store
    const localVue = createLocalVue()
    localVue.use(Vuex)

    // commit mutation
    store.commit('mutatePickedDates', dates)

    expect(store.pickedDates.length).toBe(2)
})

참조URL: https://stackoverflow.com/questions/60549520/testing-vuex-store