【React,Jest, testing library】ReferenceError: fetch is not definedエラーの解消方法【vite,webpack】

今回はReactアプリを作成する際にReferenceError: fetch is not definedエラーが出た際の解消方法をエントリーします。

ケースとしてはcreate react appではなくwebpackやviteでアプリを作成しアプリ内でfetchを使いAPIなどを利用したケースをJest + Testing libraryでテストを行った際にReferenceError: fetch is not definedが発生しました。

エラー概要

コンポーネントで呼び出しているfetchでエラーとなっています。

ReferenceError: fetch is not defined

      26 |   const handleClick = async (user: User) => {
      27 |     
    > 28 |     const response = await fetch('http://localhost:8080/xxxx', {
         |                      ^
      29 |       method: 'POST',
      30 |       mode: 'cors',
      31 |       cache: 'no-cache',

解消方法

cross-fetch/polyfillを用いて解消します。

npm install --save-dev cross-fetch

テストコードサンプル

import 'cross-fetch/polyfill'でポリフィルをimport

<Sample />コンポーネントが今回fetchを利用しているコンポーネントです。

import { render, screen } from '@testing-library/react'
import 'cross-fetch/polyfill'

describe('Sample', () => {
  it('test', async () => {
    render(
      <Sample />
    )
    expect(screen.getByText('テストコード')).toBeInTheDocument()
  }
}