손쉽게 API 호출을 모의(스텁)화하고 싶었다

이 기사에 대하여

(주) 모의인가 스텁인가, 라고 하는 점에서는, 스텁이겠지만, axios-mock-adapter 가 모의라는 이름을 사용하고 있기 때문에 아래와 같은 모의로 통합니다.

개발시 외부의 API 호출을 모의화하고 응답을 손쉽게 지정하는 방법은 어떻게 하는 것이 좋을까, 라고 생각하고 있어 조금 구그였지만, 모의 서버 세우는 방법은 그다지 간편하지 않구나, 라고 생각했고 axios-mock-adapter 는 좋지만, 일률 전혀 모형화 되어 버리는 것도 그렇구나, 라고 생각했기 때문에, 도착한 것이 이하의 방법입니다.

더 쉬운 방법이 있다는 분이 있으면 꼭 알려주세요.

개요

axios 호출은 API 호출을 래핑한 객체에 갇히고 webpack resolve.alias에서 디렉토리별로 전환하는 방법입니다.

webpack.config.js

const path = require('path');

const apiRoot = (process.env.NODE_ENV === 'development')
  ? 'apiMock'
  : 'api'
;
module.exports = {
  resolve: {
    alias: {
      'api': path.resolve(__dirname, apiRoot),
    }
  }
}

USE_MOCK=true 같은 환경 변수를 별도 준비해도 좋을지도 모릅니다.

클라이언트

import api from 'api'

api.getHoge()
.then(res) => {
  //
}

api/index.js

import axios from 'axios'

const api = {
  getHoge () {
    return axios('/hoge')
  }
}
export default api

apiMock/index.js

const promisify = (response) => {
  return new Promise((resolve) => {
    resolve(response)
  })
}

const api = {
  getHoge () {
    return promisify({
      status: 200,
      data: [...], // data は外部の json ファイルから読んできてもいい
    })
}
export default api

장점

개발 중, 모의 내에서 실제 API 호출하고 싶을 때도 내용을 바꾸는 것만으로 OK

단점

엔드포인트 마다 api, apiMock 양쪽 모두에 동명의 메소드를 준비하지 않으면 안 되는 것이 번거롭다

결론

앞서 언급했듯이, 더 쉬운 방법이 있으면 가르쳐 주셨으면 하는 것과 메리트/단점, 그 밖에도 이런 것이 있는 것은 아닐까? 그렇다면, 지적하십시오.