🐵 테스트코드 작성시 실제 vuex사용하기(mocking아님)

🫎 vuex 사용한 구조

HocView.vue에서 store의 actions에 선언된 "apidummyApi1" 을 호출하고 다음으로는 Node Server에서 api를 요청한 다음

api에서 받은 결과값을 세팅한 이후 getters를 통해 Hoview.vue에서 messageComp를 통해 보여준다. 

vuex 사용

🐔 테스트 케이스

• 버튼을 클릭하면 messageComp에 표시되는것이 "TEST" 라는 문장이 세팅이 되어야 한다

 

😚 테스트코드 작성시 실제 vuex를 세팅

실제 사용중인 store를 import하고 plugins에 store를 추가해준다.

import { shallowMount } from '@vue/test-utils'
import HocView from '../../HocView.vue'
// 실제 사용중인 store import
import { store } from '@/store'
describe('HocView.vue 테스트', () => {
  let wrapper = null
  beforeEach(() => {
    wrapper = shallowMount(HocView, {
      global: {
        // 사용중인 store plugins에 추가
        plugins: [store]
      }
    })
  })

  test('should ', async () => {
    expect(1).toBe(1)
  })

})

 

 

🥳  테스트 케이스 작성 및 axios 가짜 호출

실제 버튼을 누르면 store의 actions에 apidummyApi1를 호출한다. 그리고 Node Server에서 "/api/dummy"를 호출하여 값을 세팅한다.

실제 화면(HocView.vue)에서 테스트 코드 작성시에 api호출에 대한 결과값이 세팅 되지 않는 문제가 있었고, 그리하여 axios.get을 가짜로 만들어주었다.

 

import { shallowMount } from '@vue/test-utils'
import HocView from '../../HocView.vue'
import { store } from '@/store'
import axios from 'axios'
describe('HocView.vue 테스트', () => {
  let wrapper = null
  beforeEach(() => {
    // 실제 store에서 호출되는 api를 해당화면에서 Mocking 처리가 필요하다
    axios.get = jest.fn().mockImplementation((url) => {
      if (url === '/api/dummy') {
        return Promise.resolve({
          status: 200,
          data: {
            message: 'TEST'
          }
        })
      }
    })

    wrapper = shallowMount(HocView, {
      global: {
        plugins: [store]
      }
    })
  })

  // 버튼 클릭시 결과값이 TEST으로 떨어진다.
  test('버튼 클릭', async () => {
    const btn1 = wrapper.find('#btn1')
    const message = wrapper.find('#message')
    await btn1.trigger('click')

    expect(message.text()).toBe('TEST')
  })
})

 

여태까지 vuex를 가짜로 구현하는 부분이 많았는데, 해당화면에서 Vuex에 많이 관여하면, 하나하나 가짜로 만들어줘야 하는 문제가 발생하였다. 실제 vuex를 이용하여 작업시간을 줄이보도록 하자