Unit Testing With Vitest

Vitest is the modern test runner for React and Next.js projects. It's fast, compatible with the Jest API you'll see in most tutorials, and integrates natively with Vite's transform pipeline — meaning TypeScript, JSX, and path aliases work out of the box.

If you've used Jest before, switching to Vitest is almost seamless. If you haven't, this lesson will get you from zero to writing confident tests.

Setup

npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

Create a Vitest config:

// vitest.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import path from "path";
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: t