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

5970 ワード
Jest React axios redux Jest テキストリンク

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);
  });
});
カスタムタイプのI/O出力の使い方
android中国語api(43)-Chronometer