# Snapshot tests: when they actually help

A snapshot pays off on small, stable output: generated class strings, error messages, serialised JSON. On a large tree it produces a file nobody rereads.

> Page: https://ui.eneawork.it/blog/test-snapshot-come-usarli
> Markdown: https://ui.eneawork.it/blog/test-snapshot-come-usarli.md

*2026-11-01*

Uno snapshot serve quando l'output è piccolo e stabile: una stringa di classi, un messaggio di errore, un JSON serializzato. Su un albero grande diventa un file che nessuno rilegge.

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 è letta dall'endpoint il giorno della pubblicazione: nessun numero in questo articolo arriva da una stima.

## La regola di base

Uno snapshot non dice se l'output è giusto, dice solo che è identico al salvataggio precedente. Vitest, con licenza MIT, scrive il valore atteso in __snapshots__ o dentro il file di test.

## Il test che vale come modello

test("le classi del badge restano stabili", () => { const { container } = render(Attivo); expect(container.firstChild).toMatchInlineSnapshot(); });

Lo snapshot inline vive nel file di test: la revisione avviene nel diff della pull request, dove il revisore vede la stringa cambiata e decide se è voluta.

## Quando conviene

## Aggiornare senza rompere

npx vitest run -u git diff --stat

Il flag -u riscrive gli snapshot esistenti: prima si guarda git diff --stat, poi si rilegge ogni blocco cambiato. Un aggiornamento alla cieca cancella il valore del test.

## Record vivi nel catalogo

Tre record da guardare per capire la dimensione del markup: faq, sidebar e data-table. Sono esattamente quelli da non fotografare interi; per esplorare parti da 111.985 componenti.

## La limitazione

Lo snapshot blocca anche i bug: un output sbagliato ma stabile passa per sempre. Inoltre fallisce a ogni modifica di stringa, quindi su componenti in evoluzione costa più di quanto protegga.

## Dove continuare

Il modello di test è in Testing Library: cinque test; una tabella grande è in tabella con TanStack; le doppie chiamate di StrictMode sono in StrictMode; il confronto misurato fra librerie è in librerie React 2026.

## FAQ

### Uno snapshot verifica il comportamento?

No. Verifica che l'output sia identico al salvataggio precedente, giusto o sbagliato che sia.

### Inline o file separato?

Inline, quando lo snapshot sta sotto le trenta righe: il diff si legge nella pull request e non si perde in una cartella.

### Ogni quanto va aggiornato?

Solo quando il cambiamento è voluto. Se si aggiorna a ogni run, il test non sta più proteggendo niente.

### Perché fallisce in CI e passa in locale?

Di solito per un output che dipende da data, ora o id casuali: si congela il valore prima di renderizzare.

### Vitest è gratis per uso commerciale?

Sì. È distribuito con licenza MIT, che permette uso commerciale e modifica mantenendo l'avviso di copyright.