【Jest】Fetch APIのインターフェースを代替する

Qiita Advent Calendar 2021 TypeScript 5日目の記事です。


例えば下記のようなTypeScriptのコードがあるとき、Jest(テスト環境)では WindowOrWorkerGlobalScope.fetch() を代替させる必要がある。

fetch('http://example.com/movies.json')
.then((response) => {
const json: Promise<Response> = await response.json();
// ...
})
.catch((error) => {
if (error instanceof Response) {
console.error('ErrorResponse:', error);
}
console.error('Error:', error);
});

そんなときは node-fetchcross-fetch といったFetch API互換のライブラリをいれて jest.config.js などでグローバル変数に設定してやればよい。

import fetch from 'node-fetch';
global.fetch = fetch;
global.Response = fetch.Response;
global.Headers = fetch.Headers;
global.Request = fetch.Request;

以上。

← Blog