HTML-snapshottests
Detecteer onbedoelde HTML-wijzigingen met snapshottests
HTML-snapshottests is een gratis HTML Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Wat snapshottesten zijn
Bij snapshottesten wordt bij de eerste uitvoering de gerenderde uitvoer van een component of pagina opgeslagen. Bij volgende uitvoeringen wordt de nieuwe uitvoer vergeleken met de opgeslagen snapshot. Elke wijziging in de HTML-uitvoer laat de test mislukken totdat de snapshot bewust wordt bijgewerkt.
Snapshottesten met Jest
Jests toMatchSnapshot()-matcher serialiseert een waarde (waaronder JSX die naar HTML is gerenderd) en vergelijkt die met een opgeslagen bestand. npx jest -u werkt snapshots bij wanneer er bewuste wijzigingen zijn. Tests vormen een regressienet voor onbedoelde wijzigingen in de gerenderde uitvoer.
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 voert elk verhaal uit en maakt snapshots van de uitvoer via axe (toegankelijkheid) en DOM-serialisatie. In combinatie met Chromatic voegt dit visuele regressiecontrole toe — verschillen op pixelniveau naast verschillen in de DOM.
Visuele regressie met Percy of Chromatic
Percy en Chromatic maken snapshots van gerenderde pagina's als afbeeldingen en tonen visuele verschillen. Ze detecteren CSS-regressies die DOM-snapshots missen (een wisseling van lettertype, een aanpassing van marge of een kleurverschuiving). Combineer DOM-snapshots (goedkoop, snel) met visuele snapshots (duur, uitgebreid).
Snapshots onderhouden
Snapshots die "te gemakkelijk" veranderen, worden ruis. Maak geen snapshots van instabiele waarden (datums, id's, willekeurige sleutels). Gebruik de property matchers van Jest (expect.any(String)) voor velden die tussen uitvoeringen terecht variëren. Houd snapshots klein en gericht.
Codebeoordeling van snapshots
Verschillen in snapshotbestanden in pullrequests zijn volwaardig materiaal voor codebeoordeling. Beoordelaars controleren of DOM-wijzigingen bewust en gewenst zijn — zo worden onbedoelde kettingreacties door een "eenvoudige" CSS-wijziging gedetecteerd. Behandel verschillen in snapshots net als elk ander verschil.
Maak niet overal snapshots van
Grote snapshots van renderingen op paginaniveau zijn kwetsbaar — elke kleine wijziging leidt tot een enorm verschiloverzicht. Maak snapshots op componentniveau: van elke Button, elke Card en elk FormField. Voor renderingen op paginaniveau zijn visuele regressietests geschikter.
Serialisatie van snapshots
Kies hoe je serialiseert: volledige HTML, een vereenvoudigde DOM, alleen props of een toegankelijkheidsboom. Elk formaat brengt andere regressies aan het licht. Voor UI-componenten is volledige HTML het grondigst; voor door props gestuurde logica is alleen props goedkoper en leidt dat zelden tot vals-positieven.
Wanneer snapshots mislukken
De meest voorkomende oorzaak is een herstructurering die gelijkwaardige, maar anders gestructureerde HTML oplevert. Bekijk het verschiloverzicht: als de wijziging bewust en goed is, werk je de snapshot bij. Is ze onverwacht, los dan de onderliggende code op. Voer nooit blind jest -u uit zonder controle.
Snapshots voor meerdere browsers
Visuele regressietools renderen in meerdere browsers en rapporteren browserspecifieke verschillen. Gebruik dit om CSS op te sporen die zich in Safari anders gedraagt dan in Chrome — iets wat vaak voorkomt bij nieuwe lay-outfuncties in een vroege invoeringsfase. Zonder snapshots voor meerdere browsers worden zulke regressies alleen door handmatige kwaliteitscontrole gevonden.
Combineren met andere tests
Snapshottests zijn noodzakelijk, maar niet voldoende. Ze vangen onbedoelde wijzigingen in rendering op, maar geen logische fouten (de knop doet bij klikken het juiste). Combineer ze met unittests voor gedrag en end-to-endtests voor gebruikersstromen — elke laag vangt andere fouten op.
Prestaties
Snapshottests zijn snel — ze vergelijken tekenreeksen en bestanden. Visuele regressietests zijn trager (pixels renderen, afbeeldingen vergelijken, vaak in meerdere browsers). Voer snapshots uit bij elke CI-build; voer visuele regressietests uit bij elke pull request, maar eventueel niet bij elke commit, afhankelijk van het CI-budget.
Kennistoets
Waarom worden DOM-snapshottests meestal aangevuld met visuele regressietests zoals Percy of Chromatic?
Samenvatting
Snapshottesten leggen bij de eerste uitvoering de gerenderde HTML vast en markeren elke wijziging bij volgende uitvoeringen. Gebruik Jest toMatchSnapshot voor de DOM van componenten, Storybook Test Runner voor stories en Percy/Chromatic voor visuele regressie op pixelniveau. Maak snapshots op componentniveau (niet op paginaniveau), sluit instabiele waarden uit en bekijk verschiloverzichten zorgvuldig in pull requests. Combineer ze met unit- en end-to-endtests voor volledige dekking.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “HTML-snapshottests” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “HTML-snapshottests”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “HTML-snapshottests”?
Detecteer onbedoelde HTML-wijzigingen met snapshottests Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “HTML-snapshottests”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De W3C Markup Validator
- Lighthouse HTML-audit
- Pa11y en axe voor toegankelijkheidstests
- HTML-snapshottests