React

Snapshot test: quando servono davvero

Uno snapshot serve su output piccolo e stabile: classi generate, messaggi di errore, JSON. Su un albero grande produce un file che nessuno rilegge.

In sintesi

  • Lo snapshot afferma che l'output è uguale a prima, non che è corretto.
  • Conviene su stringhe e strutture piccole, dove il diff si legge in trenta righe.
  • Su un albero grande il costo è la revisione: nessuno guarda un diff da 2.000 righe.

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.

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

  • Classi generate: una funzione che compone token e varianti, dove un cambio silenzioso rompe il tema.
  • Messaggi: testi di errore e di validazione che finiscono in documentazione e traduzioni.
  • Configurazioni: oggetti esportati da un modulo, come un manifest o una mappa di rotte.
  • Componenti foglia: un badge, un separatore, un'icona, sotto le venti righe di markup.

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.

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.

Domande frequenti

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.