JestでAxiosをMockしテストする

2020/12/23

TypeScript

目次

目次

  1. はじめに
  2. テストケース内で制御する方法
  3. Manual Mocks で制御する方法

はじめに

Jest でテストを書く際に，Axios を Mock する必要があります。Axios の一部を mock する方法，全体を mock する方法の２つを紹介します。

テストケース内で制御する方法

Mock する API が少ない場合には，こちらの手法が有効です。シンプルに実装でき，見通しが良いです。

import axios from "axios";
jest.mock("axios");
axios.get.mockImplementation(api => {
  switch (api) {
    case "/api/test":
      return Promise.resolve({ status: 200 });
  }
});

Manual Mocks で制御する方法

マニュアルモックはモックデータを返す機能をスタブするために使用します。 例えば、ウェブサイトやデータベースのような外部リソースにアクセスする代わりに、偽のデータが使えるマニュアルモックが欲しいと考えるでしょう。 これによりテストは高速で信頼性の高いものになります。 (Manual Mocks について Jest 公式ドキュメント より引用)

共通の api を複数箇所で呼び出す場合は，こちらの手法が有効です。 全てのテストケースにおいて Axios を Mock し，ディレクトリ構造で API を表現できます。 GET api/testを Mock したい場合は，__mockData__/api/test.json にファイルを配置します。

./mocks/axios.js

const fs = require('fs')

const mock = jest.fn((url) => {
  return new Promise((resolve, reject) => {
    fs.readFile(`./__mockData__/${url}.json`, 'utf8', (err, data) => {
      if (err) reject(err)
      resolve(JSON.parse(data))
    })
  })
})


module.exports = {
  get: mock,
}
mockData/api/test.json

{
  "status": 200
}