【ApolloClient】ReferenceError: fetch is not defined でTestが落ちる場合の対処方法

概要

NavigationのテストをReact-testing-libraryで実行すると以下のエラーでテストが落ちた。

以下を参考にしてエラーを正常化させたので方法を残す

https://stackoverflow.com/questions/50688998/using-apolloclient-with-node-js-fetch-is-not-found-globally-and-no-fetcher-pas

ReferenceError: fetch is not defined

const createApolloClient = () => {
  return new ApolloClient({
    // ブラウザで実行してる場合はwindowに値がある SSRかCSRかを切り替え
    ssrMode: typeof window === 'undefined',

    // hasuraのAPIリンク
    link: new HttpLink({
      uri: 'https://hoge.hasura.app/v1/graphql'
    }),

    // お決まりの呪文
    cache: new InMemoryCache()
  })
}

対処方法

import 'cross-fetch/polyfill を追加することでテストが正常に通るようになる

import 'cross-fetch/polyfill'

const createApolloClient = () => {
  return new ApolloClient({
    // ブラウザで実行してる場合はwindowに値がある SSRかCSRかを切り替え
    ssrMode: typeof window === 'undefined',

    // hasuraのAPIリンク
    link: new HttpLink({
      uri: 'https://hoge.hasura.app/v1/graphql'
    }),

    // お決まりの呪文
    cache: new InMemoryCache()
  })
}