React

Snapshot tests: when they actually help

A snapshot pays off on small, stable output: generated class strings, error messages, serialised JSON. On a large tree it produces a file nobody rereads.

Key points

  • A snapshot asserts the output matches the last one, not that it is correct.
  • It pays off on strings and small structures, where the diff fits in thirty lines.
  • On a large tree the cost is review: nobody reads a 2,000-line diff.

A snapshot pays off when the output is small and stable: a class string, an error message, serialised JSON. On a large tree it becomes a file nobody reads again.

The base rule

A snapshot never says the output is right, only that it matches the stored one. Vitest, under the MIT licence, writes the expected value into __snapshots__ or inside the test file.

The test that works as a model

test("le classi del badge restano stabili", () => {
  const { container } = render(Attivo);
  expect(container.firstChild).toMatchInlineSnapshot();
});

An inline snapshot lives in the test file, so review happens in the pull request diff, where the reviewer sees the changed string and decides whether it was intended.

When it pays off

  • Generated classes: a function that composes tokens and variants, where a silent change breaks the theme.
  • Messages: error and validation copy that also lands in docs and translations.
  • Configuration: objects a module exports, such as a manifest or a route map.
  • Leaf components: a badge, a separator, an icon, under twenty lines of markup.

Updating without breaking it

npx vitest run -u
git diff --stat

The -u flag rewrites existing snapshots: read git diff --stat first, then read every changed block. A blind update throws the value of the test away.

Live records in the catalogue

Three records to see how much markup is at stake: faq, sidebar and data-table. These are exactly the ones to leave unfrozen; to browse single parts start from 111,985 components.

The limitation

A snapshot locks bugs in as well: wrong but stable output passes for ever. It also fails on every string change, so on components still moving it costs more than it protects.

Where to continue

The test model is in Testing Library: the five tests; a large table is in a TanStack table; StrictMode double calls are in StrictMode; the measured library comparison is in React libraries 2026.

Frequently asked questions

Does a snapshot verify behaviour?

No. It verifies that the output matches the stored one, whether that output is right or wrong.

Inline or a separate file?

Inline, when the snapshot stays under thirty lines: the diff shows up in the pull request instead of hiding in a folder.

How often should it be updated?

Only when the change is intended. If you update on every run, the test protects nothing.

Why does it fail in CI and pass locally?

Usually because the output depends on date, time or random ids, so freeze those values before rendering.

Is Vitest free for commercial use?

Yes. It ships under the MIT licence, which allows commercial use and modification while keeping the copyright notice.