Snapshot Testing

ELI5 — The Vibe Check

Snapshot testing is taking a picture of your component's output and saving it. Next time tests run, it takes a new picture and compares them. If anything changed, the test fails. You then decide: was the change intentional? Update the snapshot. Was it a bug? Fix the code. It's like a 'spot the difference' puzzle, but for code output.

Real Talk

Snapshot testing captures the rendered output (HTML, JSON, or serialized data) of a component or function and stores it as a reference file. Subsequent test runs compare current output against the stored snapshot, flagging any differences. Popular in React testing (Jest/Vitest), it excels at catching unintended UI regressions but can produce noisy diffs and encourages 'update all snapshots' anti-patterns.

When You'll Hear This

"Snapshot tests caught the CSS regression before it hit production." / "Stop blindly updating snapshots — actually look at what changed."