🌊 vuex jest 테스트 코드 작성

🌦️ 컴퍼넌트가 아닌 vuex에 대한 테스트 코드 작성

지난번에는 컴퍼넌트에서 vuex에 대한 테스트를 실시하였다면, 이번에는 vuex에 대한 코드를 작성할 것이다.

 

일단 vuex 코드는 아래와 같다.

간단하게 사용자 정보세팅과, counter가 존재한다.

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

export { store }

 

☀️ vuex 테스트 코드 작성

store import 및 초기값 확인

import { store } from '@/store'


describe('store 테스트 코드 작성', () => {
 test('카운터(counter) 초기값 확인 ', async () => {
    expect(store.state.counter).toBe(1)
  })

  test('사용자 정보(userInfo) 초기값 확인', async () => {
    expect(store.state.userInfo).toEqual({
      name: '',
      age: 0
    })
  })
})

 

mutations 호출 확인

 // mutations 호출
  test('카운터 정보세팅(setCounter) ', async () => {
    store.commit('setCounter', 2)
    expect(store.state.counter).toBe(2)
  })

  test('사용자 정보세팅(setUserInfo) ', async () => {
    store.commit('setUserInfo', {
      name: '김대건',
      age: 33
    })
    expect(store.state.userInfo).toEqual({
      name: '김대건',
      age: 33
    })
  })

 

getters 확인

test('getters:getCounter', async () => {
    const getCounter = store.getters.getCounter
    expect(getCounter).toBe(store.state.counter)
  })
  test('getters:getUserInfo', async () => {
    const getUserInfo = store.getters.getUserInfo
    expect(getUserInfo).toEqual(store.state.userInfo)
  })

 

actions 확인

// actions 값 확인
  test('actions: apiSetUserInfo', async () => {
    const userInfo = {
      name: '홍길동',
      age: 31
    }
    await store.dispatch('apiSetUserInfo')
    expect(store.state.userInfo).toEqual(userInfo)
  })

 

 

이후 목표

이후에는 모듈을 작성 후 모듈에 대한 단위 테스트 코드를 작성해보도록 하자