【Next.js】Jestで環境変数を利用する場合の各種設定

Jestで環境変数を利用したテストを書く際に、spec内でprocess.env.NEXT...のように書くことはできない為、調べていたところ

https://stackoverflow.com/questions/63934104/environment-variables-undefined-in-nextjs-when-running-jest

上記記事を見つけたため、日本語に訳しながら手順を備忘録的に残す。

1 setupEnv.tsを__tests__ディレクトリに作成する

setupEnv.ts

import { loadEnvConfig } from '@next/env'

export default async (): Promise<void> => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

• @next/envはNextに内包されている為、新たにライブラリを加える必要はない
• setpEnv.tsやテストディレクトリ名は他の命名でもよい

2 jest.config.jsにglobalSetupを記述する

jest.config.js

module.exports = {
  ...
  globalSetup: '<rootDir>/src/__tests__/setupEnv.ts'
}

Jest run時に1で作成した環境変数読み込みを行うようにする。

3 .env.test.localにテストで利用する環境変数を記述する

NEXT_PUBLIC_ABOUT_HERO_IMAGE=hogehoge

4　セットアップ完了

以上で、テスト時に環境変数を読み込みたい場合のセットアップが完了した。
例として外部URLを環境変数で指定している箇所の場合、snapshot等で該当箇所が読み込めていることを確認できます。