概要

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

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

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()
  })
}