What to do when you can't test Spinner with findByRole("status") (Jest + Chakra UI)

#jest #test #react

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";