
Vite + React + Vitest: a simple test setup you can copy in 10 minutes
If you use Vite + React + TypeScript , the fastest way to add tests is Vitest . In this post, I will show a clean setup you can copy. Why this stack? Vite : fast dev server Vitest : test runner that feels like Jest, but faster in Vite projects React Testing Library : test from user perspective This setup works well with pnpm and small-to-medium frontend apps. 1) Install packages pnpm add -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event 2) Update vite.config.ts /// <reference types="vitest" /> import { defineConfig } from ' vite ' import react from ' @vitejs/plugin-react ' export default defineConfig ({ plugins : [ react ()], test : { environment : ' jsdom ' , setupFiles : ' ./src/test/setup.ts ' , globals : true , }, }) What this does: jsdom gives a browser-like environment setupFiles runs once before tests globals: true lets you use describe , it , expect without importing every time 3) Create src/test/setup.ts import ' @testing-library/jest
Continue reading on Dev.to React
Opens in a new tab




