Snapshot Test

ELI5 — The Vibe Check

A snapshot test takes a photo of your component's output and saves it. Next time you run it, it takes another photo and compares them. If anything changed — even one pixel of rendered HTML — the test fails. Great for catching accidental UI changes.

Real Talk

Snapshot testing renders a component (or serializes any value) and saves the output to a file. Subsequent test runs compare the output against the saved snapshot. If they differ, the test fails. Snapshots should be reviewed and updated intentionally when UI changes are expected.

Show Me The Code

import { render } from '@testing-library/react';
import Button from './Button';

test('renders correctly', () => {
  const { container } = render(<Button label="Click me" />);
  expect(container).toMatchSnapshot();
});

When You'll Hear This

"Update the snapshot after you change the button styles." / "Snapshot tests caught that the refactor changed the HTML structure."