axiosのモックについて

はじめに

axios を用いた API 利用をしているコードに対してモックを入れてテストする方法について学習したので自分用に簡単な使い方をまとめます。

概要

API をモックする際の方針として

• API アクセスを関数化した上でその戻り値をモック化する
• HTTPS アクセスの関数をモック化する

の 2 通りありますが、今回は後者の方法を実施します。

具体的にはaxiosで実行する Get メソッドや Post メソッドの戻り値をモックします。

結論

jest.mock("axios", () => ({
  get: jest.fn(() => Promise.resolve({ data: mockData })),
}));

テストの最初に上記のコードを追加すると Get メソッドの戻り値をmockDataで置き換えることが可能です。mockDatに Get メソッドで取得するデータを設定してください。

またモックの対象範囲ですが Get メソッドの戻り値までがモックされ、それ以降の処理は実際のコードが実行されます。

// 説明用のテストメソッド
const testFunc = () => {
  axios
    .get("test") // この戻り値がモックされる
    .then((res) => {
      // then句はモックされずに実際のコードが実行される
      console.log(res.data);
    });
};

モックからは毎回同じデータが返却されます。
１回のテストの中で複数回同じ API にアクセスしてそれぞれ戻り値が変化するようなケースをテストする場合には別の方法が必要です。

おわりに

Jest で axios のメソッドをモックする基本をまとめました。実際のテストではもっと複雑なモックも必要になると思うのでそちらもしっかり理解ができたらまとめたいです。