🔗 vuex jest 사용

📘 vuex 사용화면

vuex내용은 간단하다. Promise 객체를 통해 사용자 정보를 세팅하는 과정이다.

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    userInfo: {
      name: '',
      age: 0
    }
  },
  mutations: {
    setUserInfo(state, payload) {
      state.userInfo = payload
    }
  },
  getters: {
    getUserInfo(state) {
      return state.userInfo
    }
  },
  actions: {
    apiSetUserInfo({ commit }) {
      new Promise((reslove) => {
        reslove('success')
        commit('setUserInfo', {
          name: '홍길동',
          age: 31
        })
      })
    }
  },
  modules: {}
})

export { store }

 

아래는 해당화면 vue이다.

dispatch를 통해 사용자 정보를 세팅하고,

getters를 통해 사용자 정보를 보여주는 화면이다.

<template>
  <div>
    <h1>Main.vue</h1>
    <p data-userinfo="username">{{ getUserInfo.name
     }}</p>
     <p data-userinfo="userage">{{ getUserInfo.age
     }}</p>
  </div>
</template>
<script>
export default {
  name: 'MainView',

  async created(){
      await this.$store.dispatch("apiSetUserInfo")
  },

  data() {
    return {}
  },

  mounted() {},

  methods: {},

  computed:{
    getUserInfo(){
      return this.$store.getters.getUserInfo
    }
  }
}
</script>

 

✂️ vuex 화면 테스트 코드

테스트코드에서 vuex세팅

여러가지 vuex 세팅하는 방법이 있다. mock처리 한다던지, 여기서는 mock처리를 하지 않았다.

테스트 코드에서 Vuex,createLocalvue를 통해 vuex를 세팅하고,

shallMount의 인자에 store,localVue를 넣었다.

import { shallowMount, createLocalVue } from "@vue/test-utils";
import MainView from "../../MainView.vue";
//1. vuex import
import Vuex from 'vuex';
//2.createLocalVue 
const localVue = createLocalVue();
localVue.use(Vuex)

describe('MainView Testing', () => {
    let wrapper = null;
    let store = null;
    beforeEach(() => {
    	//vuex 선언 및 화면에서 사용되는 vuex 세팅
        store = new Vuex.Store({
            state: {
                userInfo: {
                    name: '',
                    age: 0
                }
            },
            getters: {
                getUserInfo(state) {
                    return state.userInfo
                }
            },
            mutations: {
                setUserInfo(state, payload) {
                    state.userInfo = payload
                }
            },
            actions: {
                //실제 API보다는 Promise 형태로 Return 해준다.
                apiSetUserInfo({ commit }) {
                    new Promise((reslove) => {
                        reslove('success')
                        commit('setUserInfo', {
                            name: '홍길동',
                            age: 31
                        })
                    })
                }
            }
        })
        wrapper = shallowMount(MainView, {
            // 3. store,localVue 선언
            store,
            localVue
        })
    });
    test('나의 이름,나이가 세팅이 된다 ', async () => {
      
    });
});

 

vuex에서의 값 테스트 코드 작성

import { shallowMount, createLocalVue } from "@vue/test-utils";
import MainView from "../../MainView.vue";
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex)

describe('MainView Testing', () => {
    let wrapper = null;
    let store = null;
    beforeEach(() => {
        store = new Vuex.Store({
            state: {
                userInfo: {
                    name: '',
                    age: 0
                }
            },
            getters: {
                getUserInfo(state) {
                    return state.userInfo
                }
            },
            mutations: {
                setUserInfo(state, payload) {
                    state.userInfo = payload
                }
            },
            actions: {
                apiSetUserInfo({ commit }) {
                    new Promise((reslove) => {
                        reslove('success')
                        commit('setUserInfo', {
                            name: '홍길동',
                            age: 31
                        })
                    })
                }
            }
        })
        wrapper = shallowMount(MainView, {
            store,
            localVue
        })
    });
    test('나의 이름,나이가 세팅이 된다 ', async () => {
        // vuex에서 사용한 값 테스트
        const userInfoEle = wrapper.find('[data-userinfo="username"]');
        const userInfoAgeEle = wrapper.find('[data-userinfo="userage"]');
        expect(userInfoEle.text()).toBe('홍길동');
        expect(userInfoAgeEle.text()).toBe('31');
    });
});