はじめに
Jest でテストを書いたときに「ローディングスピナーが見つからない」というエラーに遭遇しました。この記事では、そのときの状況と解決方法をまとめます。
1.import.meta.env が使えないエラー
シチュエーション
-
React + Vite + Supabase を使った学習記録アプリを開発中
-
Supabase クライアントを Jest でモック化しようとした
-
本番コード (utils/supabase.ts) をコピーして、mocks/utils/supabase.ts を作成
その中で以下のように書いていた：
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
しかし Jest は Vite の import.meta.env を理解できない
問題
import.meta.env は Vite のビルド環境でのみ有効
Jest（Node.js環境＋ts-jest）ではサポートされていないため TypeScript コンパイルエラーが発生
解決方法
テスト専用モックでは process.env を利用する
さらに .env.test を作って Jest 実行時にロードさせる
// src/mocks/utils/supabase.ts
const supabaseUrl = process.env.VITE_SUPABASE_URL || "http://localhost:54321";
const supabaseAnonKey = process.env.VITE_SUPABASE_ANON_KEY || "mock-anon-key";
まとめ
- Supabase モックで import.meta.env を使った → Jest では使えずエラー
解決方法: process.env に切り替える