【初心者向け】Vite+React+TypeScriptでJestが import.meta で落ちる問題を最短で解決する（Supabase対応）

はじめに

Vite＋TypeScriptのアプリをJestでテストしたところ、以下のようなエラーが発生しました。

• TS1343: 'import.meta' は特定の module 設定でしか使えません

• SyntaxError: Cannot use import statement outside a module

• ついでに、テスト中に Supabase へアクセスして ENOTFOUND などのログが流れる

原因

• Jest（=Node）では import.meta.env が使えないのに、src/utils/supabase.tsがそれ前提で書かれていたこと
• Jest 設定が ESM/CJSで混線していた、というのが原因でした。(Jest が「これはどっち方式のファイル？」と解釈に失敗してエラーが連鎖した)
  の２点が原因でした。

解決方法

1. supabase.ts から import.meta.env を撤去して process.env に統一

// src/utils/supabase.ts
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.VITE_SUPABASE_URL || "";
const supabaseAnonKey = process.env.VITE_SUPABASE_ANON_KEY || "";

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

2. セットアップは JS で書く（require を使う）

// jest.setup.js
require("@testing-library/jest-dom");

// テスト用ダミー値（本物を使うなら .env.test + dotenv でもOK）
process.env.VITE_SUPABASE_URL = "https://dummy.supabase.co";
process.env.VITE_SUPABASE_ANON_KEY = "dummy-anon-key";

3. Jest の設定を CommonJS で固定

// jest.config.cjs
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  transform: {
    "^.+\\.(ts|tsx)$": ["ts-jest", { tsconfig: "tsconfig.json" }],
  },
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy",
  },
};

まとめ

• テストは本番と別世界：本番で使えるもの（import.meta.env）がテストでは使えないことがある

• “書き方”は統一：Jest 周りは CJS（require / module.exports） にしておくと安定

• 外部サービスへの通信はテストで止める：モックに置き換えて、「テストは動作確認だけ」に集中