axiosでのajaxリクエストをモックしてテストを書く

JavaScriptで使うAJAXライブラリといったら superagent, whatwg-fetch, axios が最近の主流ですね。ちなみに私はaxiosがその中でも使い勝手がよく、メインの開発で使っています。

テスト周りでの作業記録をば。

AJAXまわりでテストコードを書くときに、通信をモックさせたい場合があります。axiosではどのようにモックが書けるのか忘れないように個々に書いておこうと思います。今回使うパッケージは以下の3つ。ちなみにテストフレームワークはJestを使います。

• axios
• axios-mock-adapter
• Jest

まずはHttpClientを書くところから。実装部分なんで好きに書きます。

// clientHttp.js
import axios from 'axios';

export const client = axios.create({
  baseURL: 'http://api.hogehoge.com',
  timeout: 5000,
  ...
});

export function get() {
  return client.get('/get');
}

export function post() {
  return client.post('/post');
}

ここで axios のインスタンスを生成しているわけですが、ちゃんとそれも export してあげる事がモックのときにかなり重要になります。

次にテストコードを書きます。

// __tests__/clientHttp-test.js
import MockAdapter from 'axios-mock-adapter';
import { client, get, post } from '../clientHttp.js';
const mockAxios = new MockAdapter(client);

describe('clientHttp', () => {
  it('should return get mock data.', () => {
    mockAxios.onGet('/get').reply(200, { id: 1 });
    return get().then(res => {
      expect(res.data).toEqual({ id: 1 });
    });
  });
  it('should return post mock data.', () => {
    mockAxios.onPost('/post').reply(200, { id: 1 });
    return post().then(res => {
      expect(res.data).toEqual({ id: 1 });
    });
  });
});

モックさせるときに公式ドキュメントだと少しわかりにくいのですが、先程exportさせたaxiosのインスタンス（上記コードではclient）を引数にMockAdapterのインスタンスを生成してあげないと行けない（当たり前ですが）。ただし、axios#createしていない場合にはデフォルトのものを使っているので、MockAdapterでnewさせる時はそのまんまのaxiosを使えます。

こんな感じでaxiosを使ったAJAX周りのテストも快適に書けるようになったので心地よくテスト生活を遅れそうです。