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
Kazutora Hattori | Sciencx (2025-09-19T08:39:36+00:00) What to do when you can’t test Spinner with findByRole(“status”) (Jest + Chakra UI). Retrieved from https://www.scien.cx/2025/09/19/what-to-do-when-you-cant-test-spinner-with-findbyrolestatus-jest-chakra-ui-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.