kawa.dev

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

JestでAxiosをMockしテストする

2020-12-23

Jest

/

Axios

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

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

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 }