Snapshot Testing: Lock In Your UI's Rendered Output

Why it exists

Manually checking every UI component for visual regressions after every code change is tedious and error-prone. Snapshot tests automate this by creating a 'lock file' for your component's rendered output, ensuring it doesn't change unexpectedly.

The mental model

Think of snapshot testing as version control for your component's rendered HTML. When you run a snapshot test for the first time, you are 'committing' the initial, correct output. On subsequent test runs, Jest checks for 'unstaged changes.' Your job is to review the diff and decide if the changes are a deliberate feature or an accidental bug.

How it works

A test renderer, like from React Testing Library, renders your component into a serializable string. The first time you run expect(component).toMatchSnapshot(), Jest saves this string to a human-readable .snap file next to your test. On future runs, it generates a new string and compares it to the saved one. If they differ, the test fails. To accept an intentional change, you run Jest with the --updateSnapshot (or -u) flag, which overwrites the old snapshot with the new one.

When to use it

Use snapshot tests for components that are visually stable and you want to protect from regressions. They are excellent for ensuring that refactoring component logic or updating dependencies didn't break the UI's structure. They test the output, not the implementation.

When not to use it

Avoid snapshots for components with non-deterministic output, like those displaying random numbers or timestamps, as they will always fail. They are also not a replacement for functional tests; they only check the rendered structure, not user interactions or behavior. A snapshot can't tell you if a button's onClick handler works.

One canonical example

A test for a simple <Link> component renders <Link href="/home">Home</Link>. The first run saves a snapshot of the output: Home. Later, a developer accidentally changes the component to render a <button>. The snapshot test fails because the new output "<button>Home</button>" doesn't match the saved tag, catching the regression before it ships. If the change was intentional, the developer would run jest -u to accept the new version.