秒でaxiosをモックするnpmモジュールの入門サンプル

突然axiosのGET/POST/PUT/DELETEを丸ごとモックしたくなるときってありますよね！
axios-mock-server - GitHub

インストール

$ npm i axios axios-mock-server

APIエンドポイント定義

/users のGETとPOSTを mocks/users.js に定義する

mocks/users.js

const users = [{ id: 0, name: 'taro' }]

export default {
  get: () => [200, users], // 返り値は [status, body?, headers?]

  post: ({ data }) => {
    users.push({
      id: users.length,
      name: data.name
    })

    return [201]
  }
}

npmスクリプト定義

モックAPIルーティングファイルをビルドするnpmスクリプトを定義

package.json

{
  "scripts": {
    "mock:build": "axios-mock-server -b"
  }
}

ルーティングファイルをビルド

npmコマンドで起動。 mocks/$mock.js が生成される。

$ npm run mock:build

axiosのモック化

環境変数を見て開発中だけaxionのモックを有効にするメインの index.js

index.js

import axios from 'axios'
import mock from './mocks/$mock.js' // ビルドで自動生成されたファイル

if (process.env.NODE_ENV === 'develop') {
  mock() // axiosのモック有効化
}

(async () => {
  await axios.post('/users', { name: 'yoko' })

  const users = await axios.get('/users')
  console.log(users.data) // [{ id: 0, name: 'taro' }, { id: 1, name: 'yoko' }]
})()

もっと詳しく

他にもモックサーバーに必要な機能はだいたい揃ってます。
RESTfulな「axios-mock-server」の使い方 - Qiita

メインのJSファイルのビルドはこの記事のスコープ外なので解説しませんでした。
webpack/parcel/browserifyあたりを普段通りに使ってください。