viteでのプロジェクトで、環境変数を含む部分のテストをjestで行う

viteのプロジェクトでjestを使ってテストを実行したところ、環境変数を読み込んでいる部分でエラーが出たため、それを修正した備忘録です。

環境

• vite: 4.0.0
• jest: 29.3.1
• ts-jest: 29.0.5
• @types/jest: 29.2.5
• typescript: 4.9.3

前提

本プロジェクトでは、2通りの方法で環境変数を使用しています。

1. .envファイルに環境変数を記載して、import.meta.envで読み込んで使用する
2. yarn devの実行時に、コマンドラインから環境変数を渡す。
   ("dev": "VITE_NODE_ENV=local vite --mode default")

発生したエラーと対処法

まずjestを実行したところ、次のエラーが発生しました。

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

こちらの記事の手順で、import.meta.envをprocess.envに変更しました。詳細はこちらの記事に書いてあるため、ここでは省略します。

この変更を行ったところ、上記のエラーは解消されましたが、コマンドラインから渡している環境変数が読み込めないというエラーが新たに出現しました。コンソールに値を表示して確認したところ、値がundefinedになっていました。

  ● Test suite failed to run

    nodeEnvの値が不適切です

      13 |
      14 |   if (nodeEnv !== 'local' && nodeEnv !== 'test' && nodeEnv !== 'staging' && nodeEnv !== 'production') {
    > 15 |     throw new Error('nodeEnvの値が不適切です');
         |           ^
      16 |   }
      17 |

コマンドラインで指定した環境変数はjestの実行時に読み込んでくれないのかな？と思い調べていると、テストの実行前に関数を実行し、その中で環境変数を設定できるglobalSetupというjestの設定に辿り着きました。

こちらの記事を参考にし、以下のようにsetupEnvironment.tsファイルを作成してjest.config.jsファイルで呼び出すことで、環境変数を設定することができました。

const setEnvironment = (): void => {
  process.env.VITE_NODE_ENV = 'local';
  return;
};

export default setEnvironment;

おわりに

他にもやり方があるような気もしますが、とりあえずこの方法でテストを実行できるようになりました。