유닛 테스트 시 axios-mock-adapter 활용하기

유닛테스트 시 ajax 호출 후 response data를 사용하는 코드를 테스트 해야하는 경우가 있다. 이때 axios-mock-adapter를 활용하여 dummy data를 생성하고 테스트에 활용할 수 있다.

 

아래와 같이 API를 호출하는 샘플 코드가 있다. 받아온 data의 trackKind 값에 따라 this.text를 다르게 설정하는 코드이다.

export default {
  name: 'App',
  data () {
    return {
      text: ''
    }
  },
  created () {
    axios.get('https://www.googleapis.com/youtube/v3/captions', {
      params: {
        key: '...',
        part: 'snippet',
        videoId: 'rlR4PJn8b8I'
      }
    })
      .then((response) => {
        const item = response.data.items[0]

        if (item.snippet.trackKind.toLowerCase() === 'standard') {
          this.text = 'aaaaaa'
        } else {
          this.text = 'bbbbbb'
        }
      })
      .catch((error) => {
        console.log(error)
      })
  }
}

테스트 시 실제 API를 호출하게 되면 DB에 등록된 'standard' 값을 내려주기 때문에 else 케이스에 대한 테스트는 진행되지 않는다. API에서 내려주지 않는 케이스에 대해 테스트가 필요할 때 mock data를 생성하면 효과적이다.

---

우선 axios-mock-adapter를 사용하기 위해 필요한 플러그인을 설치한다.

 

1) (설치되어 있지 않다면) axios를 설치한다.

npm install axios --save

 

2) axios-mock-adapter를 설치한다.

npm install axios-mock-adapter --save-dev

 

3) 비동기 promise 처리를 위해 flush-promises를 설치한다.

npm install flush-promises --save

---

테스트 코드를 작성한다. (코드의 의미는 주석 참조)

import { assert } from 'chai'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import flushPromises from 'flush-promises'
import App from '@/App.vue'

describe('App.vue', () => {
  it('check trackKind', async () => {
    // MockAdapter 생성자로 객체 생성한다.
    const mock = new MockAdapter(axios)

    // App.vue 컴포넌트를 마운트한다.
    const wrapper = mount(App, {})

    // API URL을 정의한다.
    // App.vue 내에서 사용하는 API 주소와 동일하게 설정한다.
    const apiUrl = 'https://www.googleapis.com/youtube/v3/captions'

    // apiUrl로 호출했을 때 전달받을 json을 정의한다.
    // 테스트에 원하는 값으로 자유롭게 설정할 수 있다.
    const response = {
      data: {
        items: [
          {
            snippet: {
              trackKind: '',
              language: 'en'
            }
          }
        ]
      }
    }

    // mock 객체를 활용하여 API를 호출한다.
    // get 메서드로 호출하고, 200 응답 시 위에서 정의한 response 값을 받는다.
    mock
      .onGet(apiUrl)
      .reply(200, response.data)

    // API 네트워크 응답 받기 전에 테스트할 코드를 작성한다.
    // wrapper.vm은 App.vue 컴포넌트 객체를 가리킨다.
    assert.equal(wrapper.vm.text, '')

    // 비동기 처리를 위한 코드이다.
    // 이 코드를 기점으로 API 응답 전/후를 나눌 수 있다.
    // async, await를 사용한다.
    await flushPromises()

    // API 네트워크 응답 받은 후에 테스트할 코드를 작성한다.
    assert.equal(wrapper.vm.text, 'bbbbbb')
  })
})

axios-mock-adapter에 대한 더 많은 사용 정보는 https://github.com/ctimmerm/axios-mock-adapter 에서 확인할 수 있다.

 

axios-mock-adapter는 테스트 뿐 아니라 개발시에도 다양하게 활용할 수 있을 것 같다.