This content originally appeared on DEV Community and was authored by Kazutora Hattori
Introduction
When writing tests with Jest, I encountered the error “Loading spinner not found.” This article summarizes the situation and how to resolve it.
1. import.meta.env not working error
Situation
Developing a learning record app using React, Vite, and Supabase
Trying to mock the Supabase client with Jest
Copying the production code (utils/supabase.ts) and creating mocks/utils/supabase.ts
The following was written in it:
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
However, Jest does not understand Vite’s import.meta.env.
Problem
import.meta.env is only valid in the Vite build environment.
It is not supported in Jest (Node.js environment + ts-jest), so TypeScript is not supported. A compilation error occurs.
Solution
Use process.env for test-only mocks.
Additionally, create .env.test and load it when Jest runs.
// 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";
Summary
- Using import.meta.env in a Supabase mock → Jest fails, resulting in an error. Solution: Switch to process.env.
This content originally appeared on DEV Community and was authored by Kazutora Hattori