Jestでfetchを簡単にモックする方法｜Angular｜TypeScript

UNO

どうも、こんにちは。widen uno（@WidenUno）です。

先日、Angularプロジェクト上のfetchをJestでモック化する際、手こずったため、今回は、簡単な技術メモとして「Jestでfetchを簡単にモックする方法」をご紹介いたします。
ぜひ参考にしてみて下さい。

UNO
ウェブサイト制作と投資を愛するブロガー
【経歴】
・東京在住
・外資系企業就職
・自粛期間に複業スタート
・2021年2月から本格的にブログ開始
・半年で月間2万PV達成
・1年で月間5万PV達成
・2023年月間9.4万PV達成

テスト対象コード

今回のテスト対象コードはこちらです。

fetchURL() {
  fetch('URL')
    .then((response) => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      // メイン処理
    })
    .catch((error) => {
      // エラー処理
      console.error(error);
    });
}

Fetch API は、リクエストやレスポンスといった HTTP のパイプラインを操作する要素にアクセスするための JavaScript インターフェイスです。

テスト対象コードは、fetchを使用し、URLにアクセスします。

レスポンスに応じて、メイン処理とエラー処理を行います。

Jestのテストコード

Jestのテストコードはこちらです。

コピー＆ペーストして利用してみて下さい。

期待値は適当なため、自身のコードに合わせて修正してください。

また、レスポンスを変えたい場合は、Promise.resolveの中身を変更して下さいね。

// fetchが成功した場合
test('fetch url response is success', () => {
  const dataPokemonsMock = () => Promise.resolve({ ok: true, status: 200, statusText: 'ok' });
  global.fetch = jest.fn().mockImplementation(dataPokemonsMock);
  service.fetchURL();
  expect(service.fetchURL);
});

// fetchが失敗した場合
test('fetch url response is error', () => {
  const dataPokemonsMock = () => Promise.resolve({ ok: false, status: 403, statusText: 'false' });
  global.fetch = jest.fn().mockImplementation(dataPokemonsMock);
  service.fetchURL();
  expect(service.fetchURL);
});

簡単な技術メモとなりましたが、ぜひ少しでも参考になれば嬉しいです。

ITエンジニアの転職には、ITエンジニアに特化した就活ナビがおすすめですよ。

登録無料ですので、ぜひ活用してみて下さい。