Jestで環境変数を読み込めない(React, TypeScript, supabase)

問題

Jestで環境変数を読み込めず、エラーになっていました。

解決方法

viteプロジェクトで環境変数(.env)を読み込めるようにする

vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import envCompatible from "vite-plugin-env-compatible";

// defineConfig 関数を使うと、Viteの設定をオブジェクトとしてエクスポートする際に、型補完やエラーチェックが効く
export default defineConfig({
  plugins: [
// 中略
    // vite-plugin-env-compatibleプラグインを使用して、環境変数(.envで定義)をViteプロジェクトに適用するために使用される
    // Jestでの使用: Viteの環境変数をJestで使用できるようにする
    envCompatible({
      // プレフィックスの指定: 環境変数の前に付ける特定の文字列（この場合はVITE_）を指定
      // セキュリティ: ViteはデフォルトでVITE_プレフィックスが付いた環境変数のみをクライアントサイドのコードに公開
      // 意図しない環境変数がクライアントサイドに漏洩するのを防ぐ
      prefix: "VITE",

      // 環境変数をprocess.env形式で利用できるようにする 例: process.env.VITE_API_KEY として環境変数にアクセスできる
      // 環境変数を process.env にマウントすることで、Node.js 環境で使用されるオブジェクトにアクセスできるようにする
      // サーバーサイドのコードやテスト環境でも同じ環境変数を使用できる
      mountedPath: "process.env",
// 以下略
});

.env

// sample
VITE_SUPABASE_URL=https://sample.supabase.co
VITE_SUPABASE_ANON_KEY=testtesttest

.supabase.ts

import { createClient, SupabaseClient } from '@supabase/supabase-js'

//vite.config.tsで設定した方法で、.envから環境変数を取得
const supabaseUrl: string = process.env.VITE_SUPABASE_URL as string
const supabaseKey: string = process.env.VITE_SUPABASE_ANON_KEY as string

const supabase: SupabaseClient = createClient(supabaseUrl, supabaseKey)

export default supabase

Jestから環境変数を読み込めるよう設定

jest.config.ts

import type { Config } from "jest";

const config: Config = {
// 中略

// setupFilesは、テストコードがそれぞれ実行される前に実行される
// Jestは .env ファイルから環境変数を自動的に読み込むことができない
// setupFiles: ["dotenv/config"]を使用すると、Jestがテストを実行する前にdotenvパッケージを読み込み、.envファイルに定義された環境変数をprocess.envに設定
// テストコード内でprocess.envを使って環境変数にアクセスできるようになる
  setupFiles: ["dotenv/config"],

// 以下略

終わりに

振り返って改めてコードを確認したところ、Jestで環境変数を読み込む方法の理解ができました。