Vite 環境でテストするためにJestを実行すると、process.env が undefined になる場合があります
これは、Vite では import.meta.env を使用する仕様になっているため、Jest で import.meta.env を直接利用できないことが原因です。
Vite でも Jest でも process.env を統一して使用する方法を紹介します。
前提条件
- Vite + React 環境 で開発を行っている
- Jest + React Testing Library を使用してテストを実行
- 環境変数 (
import.meta.env) を.envに定義している - Supabase などの API キーを
.envで管理している - テスト時にも環境変数を適用し、正しく動作するか検証したい
process.env が使えない原因
- Vite は
import.meta.envを推奨しており、デフォルトではprocess.envをサポートしていません - Jest は
import.meta.envをサポートしていないため、undefinedになってしまいます - 環境変数を統一するには、Vite の設定を変更する必要があります
Vite の設定
vite.config.js に define を追加し、process.env を Vite でも利用できるようにします。
vite.config.js
import { defineConfig } from "vite";
import dotenv from "dotenv";
// `.env` を読み込む
dotenv.config();
export default defineConfig({
define: {
"process.env": process.env, // Vite でも `process.env` を使えるようにする
},
});
.env
VITE_SUPABASE_URL=https://your-supabase-url
VITE_SUPABASE_ANON_KEY=your-anon-key
ポイント
-
dotenv.config();で.envをprocess.envに適用 -
define: { "process.env": process.env }で Vite 内でもprocess.envを使えるようにする -
.envの変数はVITE_をつける必要がある
Supabase クライアントの設定
supabaseClient.js では process.env を使用するように修正します。
supabaseClient.js
import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(
process.env.VITE_SUPABASE_URL,
process.env.VITE_SUPABASE_ANON_KEY
);
Jest で .env.test を読み込む
Jest のテスト環境用に .env.test を作成します。
.env.test
VITE_SUPABASE_URL=https://your-test-supabase-url
VITE_SUPABASE_ANON_KEY=your-test-anon-key
jest.setup.js
import dotenv from "dotenv";
dotenv.config({ path: ".env.test" });
動作確認
- Vite 開発環境で
console.log(process.env.VITE_SUPABASE_URL);を実行し、値が取得できることを確認 - Jest 実行時も
console.log(process.env.VITE_SUPABASE_URL);を出力し、正しく読み込まれているか確認
まとめ
- Vite では
import.meta.envを使うが、Jest ではprocess.envを使用する - Vite の
defineを設定することで、process.envを統一できる -
.envと.env.testを分けることで、開発環境とテスト環境を分離できる
これで Vite でも Jest でも process.env を統一して使用できます。