HTML Academy · Lezione

Test snapshot dell’HTML

Individuare modifiche HTML involontarie con i test snapshot

Test snapshot dell’HTML è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Cos'è lo snapshot testing

Lo snapshot testing registra al primo avvio l'output renderizzato di un componente o di una pagina, quindi nei successivi avvii confronta il nuovo output con lo snapshot salvato. Qualsiasi modifica all'output HTML fa fallire il test finché lo snapshot non viene aggiornato intenzionalmente.

Snapshot testing con Jest

Il matcher toMatchSnapshot() di Jest serializza un valore (incluso JSX renderizzato in HTML) e lo confronta con un file salvato. npx jest -u aggiorna gli snapshot quando si verificano modifiche intenzionali. I test fungono da rete di sicurezza contro le modifiche accidentali al rendering.

import { render } from "@testing-library/react";
import Button from "./Button";

test("Button renders consistently", () => {
  const { container } = render(<Button>Save</Button>);
  expect(container.innerHTML).toMatchSnapshot();
});

Storybook Test Runner

Storybook Test Runner esegue ogni story e ne crea uno snapshot tramite axe (accessibilità) e la serializzazione del DOM. In combinazione con Chromatic, aggiunge la regressione visiva: differenze a livello di pixel oltre alle differenze del DOM.

Regressione visiva con Percy o Chromatic

Percy e Chromatic creano snapshot delle pagine renderizzate sotto forma di immagini e mostrano le differenze visive. Rilevano le regressioni CSS che gli snapshot del DOM non individuano (una sostituzione del font, una modifica del margine, un cambiamento di colore). Affianchi gli snapshot del DOM (economici e veloci) agli snapshot visivi (costosi e completi).

Manutenzione degli snapshot

Gli snapshot che cambiano "troppo facilmente" diventano rumore. Eviti di creare snapshot di valori instabili (date, ID, chiavi casuali). Utilizzi i property matcher di Jest (expect.any(String)) per i campi che variano legittimamente tra un'esecuzione e l'altra. Mantenga gli snapshot ridotti e mirati.

Revisione del codice per gli snapshot

Le differenze dei file snapshot nelle pull request sono materiale di revisione a tutti gli effetti. I revisori verificano che le modifiche al DOM siano intenzionali e appropriate, rilevando gli effetti a cascata accidentali di una modifica CSS "semplice". Tratti le differenze degli snapshot come qualsiasi altra differenza.

Non faccia snapshot di tutto

Eseguire snapshot di rendering di pagine enormi a livello superiore è fragile: ogni modifica minore si propaga in un diff gigantesco. Esegua lo snapshot a livello di componente: ogni Button, ogni Card, ogni FormField. Il rendering a livello di pagina merita invece test di regressione visiva.

Serializzazione degli snapshot

Scelga come serializzare: HTML completo, DOM semplificato, solo props, albero di accessibilità. Ogni formato rileva regressioni diverse. Per i componenti UI, l'HTML completo è il formato più approfondito; per la logica basata sulle props, solo props è più economico e genera raramente falsi positivi.

Quando gli snapshot si rompono

La causa più comune è un refactoring che produce HTML equivalente, ma strutturato in modo diverso. Esamini il diff: se la modifica è intenzionale e migliora il codice, aggiorni lo snapshot. Se è imprevista, corregga il codice sottostante. Non esegua mai jest -u alla cieca senza prima effettuare un'ispezione.

Snapshot cross-browser

Gli strumenti di regressione visiva eseguono il rendering in più browser e segnalano le differenze specifiche del browser. Li usi per rilevare CSS che viene renderizzato in modo diverso in Safari e Chrome, un caso comune per le nuove funzionalità di layout nelle prime fasi di adozione. Senza snapshot cross-browser, queste regressioni vengono rilevate solo dal controllo QA manuale.

Combinazione con altri test

I test snapshot sono necessari, ma non sufficienti. Rilevano modifiche di rendering involontarie, ma non i bug nella logica, ad esempio quando il clic sul pulsante non esegue l'azione corretta. Li combini con test unitari per il comportamento e test end-to-end per i flussi utente: ogni livello rileva errori diversi.

Prestazioni

I test snapshot sono veloci: confrontano stringhe o file. I test di regressione visiva sono più lenti, perché eseguono il rendering dei pixel e confrontano immagini, spesso in più browser. Esegua gli snapshot a ogni build CI; esegua la regressione visiva a ogni PR, ma eventualmente non a ogni commit, in base al budget della CI.

Verifica delle conoscenze

Perché i test snapshot del DOM vengono generalmente affiancati da test di regressione visiva come Percy o Chromatic?

Riepilogo

Il test snapshot acquisisce l'HTML renderizzato alla prima esecuzione e segnala ogni modifica nelle esecuzioni successive. Usi Jest toMatchSnapshot per il DOM dei componenti, Storybook Test Runner per le stories e Percy/Chromatic per la regressione visiva a livello di pixel. Esegua snapshot a livello di componente, non di pagina, escluda i valori instabili ed esamini attentamente i diff nelle PR. Combini questi test con test unitari ed end-to-end per una copertura completa.

Domande Frequenti

La lezione «Test snapshot dell’HTML» è gratuita?

Sì — il testo completo di «Test snapshot dell’HTML» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Test snapshot dell’HTML»?

Individuare modifiche HTML involontarie con i test snapshot Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Test snapshot dell’HTML»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy