모킹 모듈(mocking module) 사용하기 / axios-mock-adapter-path-params

 

API가 다 만들어지기 전, 응답값 명세만 나온 상태에서 사용해보는 목업 API!

 

내가 직접 DB를 건드릴 수 없고 data 옵션에 하드코딩으로 넣어놓고 테스트하기에는 나중에 바꿀게 너무 많기때문에,

실제 api를 호출하면 목업 api에서 intercept하여 내가 원하는 데이터를 넣어 테스트 할 수 있어야했다.

팀장님이 이렇게 하라고 했지만 들을 당시에는 못 알아듣고..^^

나중에 다시 얘기하다가 모킹 모듈을 추천받고 사용해보게 되었다.

 

결론적으로는 덕분에 너무 편하게 개발했고 간과했던 문제점들을 매우 많이 찾을 수 있어서 시간을 아꼈다.

 

axios-mock-adapter-path-params

 

예제는 여기에 다 있으므로 따라하기만 하면 된다 :) 물론 난 따라하기만 해도 안됐음.

글로 정리하고보니 매우 간단해보이지만.. 적용하면서 힘들었다....

 

비둘기가 목으로 날아가게 만들어서 팀장님 보여드렸는데 날개로 날아갈 수 있게 만들어주셨다.

감사합니다...

 

 

---

 

 

◽ 설치하기

처음엔 [axios-mock-adapter]를 사용하다가, 그 모듈로는 파라미터까지 포함하여 테스트할 수가 없어서 [axios-mock-adapter-path-params]로 바꿔 사용했다.

npm i axios-mock-adapter --save-dev
npm i axios-mock-adapter-path-params --save-dev

 

 

 

◽ 데이터 구성하기

미리 목업 데이터들을 만들어두었고, 나중에 호출할 때 이 data들을 보내주면 된다.

[testData.js]
export const testData1 = [
    {
    	userIdx: 0,
        info: {
            name: '레오나르도',
            age: 13
        }
    },
    {
    	userIdx: 1,
        info: {
            name: '다빈츠',
            age: 53
        }
    }
]

export const testData2 = [
    {
    	id: 0,
        name: '이름'
    },
    {
    	id: 1,
        name: '나이'
    }
]

 

 

◽ mocking js 작성하기

호출부에서 API를 호출하면 모킹 모듈이 그 호출을 intercept하여 아래 데이터를 응답값으로 보내준다.

이렇게 개발하고 테스트하면 나중에 실제 API를 호출하고 테스트해야할 때 호출부를 수정할 필요 없이, interceptor하는 이 부분만 지우면돼서 매우 편리하다.

 

import axios from 'axios'
import {
  testData1,
  testData2,
} from '@/apis/testData.js'

const apiRequest = axios
import MockAdapter from 'axios-mock-adapter-path-params'
const mock = new MockAdapter(axios)

// 케이스 1. 파라미터가 없는 경우
// 200 뿐만 아니라 404, 500 에러까지 모두 목업으로 만들 수 있다.
mock.onGet('/info/test1').reply(200, testData1)
mock.onGet('/info/test1').reply(404, "error!")

// 케이스 2. 파라미터가 있는 경우
mock
  .onGet('/info/test2', {
    params: {
      searchFrom: '2022-02-19',
      searchTo: '2022-03-21',
    },
  })
  .reply(200, testData2)

export default apiRequest

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.