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

#typescript #jest #javascript

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-fetch や cross-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;

以上。

← Posts