Snapshot Test Diff Viewer

Snapshot testing captures the output of a component or function and saves it as a reference file. On subsequent test runs, the output is compared to the saved snapshot. If it differs, the test fails and you must either update the snapshot (if the change is intentional) or fix the bug causing the difference.

Snapshot tests are best for UI components (React, Vue, Svelte), serializable data structures, and generated output like HTML or JSON. They're poor for things that change often (timestamps, random IDs) or that need semantic assertions. Use them to catch unintended changes, not as a substitute for functional tests.

This tool computes a line-by-line diff between two text inputs (old vs new snapshot). Lines only in the old snapshot are shown in red (removed). Lines only in the new snapshot are shown in green (added). Unchanged lines are shown in gray. This mirrors how Jest and Vitest display snapshot diff failures.

Run jest --updateSnapshot (or jest -u) to update all failing snapshots at once. To update a specific test's snapshot, run jest --testPathPattern=MyComponent -u. Always review the diff carefully before updating — an unexpected snapshot change may indicate a real bug.

Yes, this viewer works with any text: HTML strings, plain text, YAML, Markdown, or any serialized format. Just paste both versions and hit Compare.