Nuxtにaxios-mock-adapterをプラグインとして導入してMockを簡単に使えるようにする

はじめに

NuxtとNuxtで利用するaxiosですがMock利用時にはaxios-mock-adapterを使うといいよとよく書いてある。
その割にはちゃんと開発で使えるようなフレームワークへの導入方法が書いてなかったので書いてみた

環境

• nuxt 2.0.0
• axio-mock-adapter 1.16

READMEに載っている使い方(axios-mock-adapterの普通の使い方)

MockAdapterの引数としてaxiosオブジェクトを指定して初期化して利用する

var axios = require('axios');
var MockAdapter = require('axios-mock-adapter');

// This sets the mock adapter on the default instance
var mock = new MockAdapter(axios);

// Mock any GET request to /users
// arguments for reply are (status, data, headers)
mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});

axios.get('/users')
  .then(function(response) {
    console.log(response.data);
  });

NuxtでMockを利用する場合に考慮すべきこと

• NuxtではNuxtに組み込まれたaxiosプラグイン（$axios API)を利用する。そのため上記方法でMockを利用する場合、nuxt.configで設定するaxiosのエコシステムを利用できない

実践した方法　axios-mock-adapterをNuxtのpluginとして登録する

プラグインファイルの作成

MockAdapterの引数にはResponseのdelay(ms)を設定

src/plugins/mock.js

import MockAdapter from 'axios-mock-adapter';
import ItemsDummy from '@/stub/mocks/items/search';

export default ({ $axios }) => {
  const mock = new MockAdapter($axios, { delayResponse: 500 });
  mock.onGet('/items/search').reply(200, ItemsDummy);
};

レスポンス用オブジェクトの作成

const ItemsDummy = {
  data: [
    {
      id: 1,
      title: 'AAAAA',
      description: 'aaaaa',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 2,
      title: 'BBBBB',
      description: 'bbbbb',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 3,
      title: 'CCCCC',
      description: 'ccccc',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 4,
      title: 'DDDDD',
      description: 'ddddd',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 5,
      title: 'EEEEE',
      description: 'eeeee',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
  ],
};
export default ItemsDummy;

Mockプラグインの登録

nuxt.config.js

  // pluginsにmock.jsを登録
  plugins: ['@/plugins/i18n.js', '@/plugins/mock.js'],

---

これで順次mockファイルにダミーリクエスト用オブジェクトをインポートしていけば簡単にMockができる
利用する場合はこんな感じでaxiosを呼び出して利用できる

export const actions = {
  async fetchItemsAction(context, params) {
    const payload = { list: '' };
    const { data } = await this.$axios.$get('/items/search', params);
    context.commit('fetchItems', data);
  },
};