moxiosを使用してREST-APIのテストコードを書く

Jestでテストコードを書くときにmockを作ってテストするケースが多いですね。
この記事ではHTTPクライアントのaxiosを使ってREST-APIを実行したときのテストコードについて書きます。

install

$ yarn add axios
$ yarn add -D moxios // moxiosはdevDependenciesで管理

React

• callback関数を書いています
• APIのdataを取得したらdispatchでpayloadにdataを渡しています

sammple.js

import axios from 'axios';

React.useEffect(() => { hoge(foo) }, [])

const hoge = async (callback) => {
  const response = await axios.get('http://localhost:3030');
  callback(response.data);
}

const foo = (data) => dispatch({ type: "FUGA", payload: data });

Jest

• axiosのmock「moxios」を使ってdummyのrequest/responseを記述
• test前にmoxiosをinstallして終わるとunistallする
• testコードはasync/awaitで記述
• moxios.waitのコールバック関数にrequest/responseの記述

sample.test.js

import moxios from 'moxios';

describe('moxios tests', () => {
  beforeEach(() => {
    moxios.install();
  });
  afterEach(() => {
    moxios.uninstall();
  });

  test('calls hoge callback on axios response', async () => {
    const dummy = 'dummy';

    moxios.wait(() => {
      const request = moxios.requests.mostRecent();
      request.respondWith({
        status: 200,
        response: dummy,
      });
    });

    const mock = jest.fn();
    await hoge(mock);

    expect(mock).toHaveBeenCalledWith(dummy);
  });
});