Viteで環境変数を使ったコードのテスト
Viteでの環境変数の使い方
code: app.tsx
const env = import.meta.env.VITE_XXX
jest, ts-jestを入れて環境変数が使われているファイルをテストした時のエラー
The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'.
こちらのエラーの原因
import.metaはESModuleでしか動作しない
es2020以降でしか動作しない
ts-jestを使ってテストファイルをCommonJS形式に変換してからテストしている
つまり、ts-jestによってCommonJS形式に変換されたテストファイルではimport.meta.envでの環境変数を使えない
解決策
import.meta.envでなくprocess.envの書き方で環境変数を使う
yarn add -D vite-plugin-env-compatible
code:vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
+ import env from "vite-plugin-env-compatible";
export default defineConfig({
plugins: [
react(),
+ env({ prefix: "VITE", mountedPath: "process.env" })
],
});
code: app.tsx
- const env = import.meta.env.VITE_XXX;
+ const env = process.env.VITE_XXX;
エラーが出たので従い
yarn add -D @types/node
tsconfigのtypesに"node"を追加しtscでコンパイルする
これでテストが通るようになる。