Help us understand the problem. What is going on with this article?

お手軽に 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 両方に同名のメソッドを用意しないといけないのが面倒

おわりに

前述の通り、もっとお手軽な方法があれば教えていただきたいのと、メリット/デメリット、他にもこんなのあるんじゃない?という方いたら、ご指摘ください。 :bow:

nunulk
PHP, Laravel, オブジェクト指向プログラミング, デザインパターン, リファクタリング, 関数プログラミング, etc.
http://nunulk.hatenablog.com
phper-oop
ペチオブはオブジェクト指向ワーキンググループです。様々なエンジニアの方に参加頂いております。
https://phper-oop.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away