Snapshot Testing — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Snapshot Testing
📋First Run
⚙️Snapshot File
🔄Diff
✅Update
🎯 Next: Test →
Step 1 / 4
Speed
First Run
First run creates the snapshot file automatically💡 Analogy
Like taking a photo of your living room arrangement — if anything moves, the new photo won't match.
On first run, toMatchSnapshot() creates a .snap file containing the serialized HTML. Subsequent runs compare against this stored snapshot.
Console Output
> First run: no snapshot file found
> Creating __snapshots__/button.test.tsx.snap
> Snapshot written — 1 new snapshot
●button.test.tsx
First RunL6–8
1import { render } from '@testing-library/react';
2import { expect, it, describe } from 'vitest';
3import { Button } from './Button';
4 
5describe('Button snapshot tests', () => {
6  it('matches primary button snapshot', () => {
7    const { container } = render(<Button variant="primary" label="Save" />);
8    expect(container).toMatchSnapshot();
9  });
10 
11  it('matches disabled button snapshot', () => {
12    const { container } = render(
13      <Button variant="primary" label="Submit" disabled />
14    );
15    expect(container).toMatchSnapshot();
16  });
17});
18 
19// Inline snapshot — stays in the test file
20it('renders button text', () => {
21  const { container } = render(<Button variant="ghost" label="Cancel" />);
22  expect(container.innerHTML).toMatchInlineSnapshot(`
23    "<button class="btn btn-ghost">Cancel</button>"
24  `);
25});
26 
27// Update snapshots with:
28// npx vitest --update-snapshots
28 lines
Timeline — 4 Steps
First Run
First run creates the snapshot file automatically💡 Analogy
Like taking a photo of your living room arrangement — if anything moves, the new photo won't match.
On first run, toMatchSnapshot() creates a .snap file containing the serialized HTML. Subsequent runs compare against this stored snapshot.
Console Output
> First run: no snapshot file found
> Creating __snapshots__/button.test.tsx.snap
> Snapshot written — 1 new snapshot

Was this page helpful?

Discussion

First run creates the snapshot file automatically

💡 Analogy

Like taking a photo of your living room arrangement — if anything moves, the new photo won't match.

On first run, toMatchSnapshot() creates a .snap file containing the serialized HTML. Subsequent runs compare against this stored snapshot.

Console Output

> First run: no snapshot file found
> Creating __snapshots__/button.test.tsx.snap
> Snapshot written — 1 new snapshot

First run creates the snapshot file automatically

💡 Analogy

Like taking a photo of your living room arrangement — if anything moves, the new photo won't match.

On first run, toMatchSnapshot() creates a .snap file containing the serialized HTML. Subsequent runs compare against this stored snapshot.

Console Output

> First run: no snapshot file found
> Creating __snapshots__/button.test.tsx.snap
> Snapshot written — 1 new snapshot