Vitest: setup di un progetto React in dieci minuti

Un progetto React passa a Vitest con tre pacchetti e un blocco di configurazione: ambiente jsdom, setup di jest-dom e un comando unico per locale e CI.

I pacchetti

npm i -D vitest jsdom @testing-library/react @testing-library/jest-dom

Vitest, Vite e jsdom sono distribuiti con licenza MIT. La configurazione vive in vite.config.js: non serve un secondo bundler né un file separato.

Il blocco di configurazione

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: "./src/test/setup.js",
  },
});

Il blocco test lo legge solo Vitest, Vite lo ignora in build. setupFiles carica jest-dom una volta per tutti i test, invece di importarlo in ogni file.

Il file di setup

import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach } from "vitest";

afterEach(() => cleanup());

L'import di jest-dom aggiunge i matcher come toBeInTheDocument; con globals: true i file di test non importano test e expect.

Il primo test

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { LoginForm } from "./LoginForm";

test("mostra l'errore con email vuota", async () => {
  render( {}} />);
  await userEvent.click(screen.getByRole("button", { name: "Accedi" }));
  expect(screen.getByRole("alert")).toHaveTextContent("Email obbligatoria");
});

Il comando npx vitest run esegue una volta ed esce con codice zero o uno: è la forma che serve in CI, mentre npx vitest resta in ascolto.

Record vivi nel catalogo

Tre componenti su cui provare la suite: login-form, input e multistep-form. Per sfogliare per categoria parti da 111.985 componenti.

La limitazione

jsdom non applica CSS e non calcola il layout: un test verde non dice se il componente si vede. Per quello serve un browser vero, con Playwright.

Dove continuare

Il quadro dei cinque test è in Testing Library: cinque test; come si legge una documentazione è in documentazione React; il confronto misurato fra librerie React è in librerie React 2026.