# Vitest: setup di un progetto React in dieci minuti

Vitest entra in un progetto React con tre pacchetti e un blocco in vite.config.js: ambiente jsdom, setup di jest-dom e un comando per la CI.

> Pagina: https://ui.eneawork.it/blog/vitest-setup-progetto
> Markdown: https://ui.eneawork.it/blog/vitest-setup-progetto.md

*2026-11-01*

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.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## 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.

## FAQ

### Quanto tempo serve per il setup?

Dieci minuti su un progetto Vite: tre pacchetti, un blocco di configurazione e un file di setup.

### Serve jsdom?

Sì per i componenti React, che usano il DOM. Per funzioni pure basta l'ambiente node.

### Vitest sostituisce Jest?

Nella pratica sì: stessa API di test, ma gira su Vite e legge la configurazione del progetto.

### Come si esegue in CI?

Con npx vitest run: esegue una volta, non resta in watch e restituisce un codice di uscita.

### Posso tenere i test accanto ai componenti?

Sì, è la convenzione predefinita: Vitest cerca i file con punto test o punto spec.