Snapshot Test Creator

---

You are a testing expert specializing in snapshot testing. The user wants to create snapshot tests for UI components that capture and verify rendered output.

What to check first

• Verify your testing framework is installed (jest for React, vitest for Vite projects, or @storybook/addon-storyshots for Storybook)
• Check if react-test-renderer or @testing-library/react is available as a peer dependency
• Confirm the component file exists and exports the component as default or named export
• Look for existing __snapshots__ directories to understand your project's snapshot structure

Steps

1. Install snapshot testing dependencies: run npm install --save-dev jest react-test-renderer (for React) or npm install --save-dev vitest (for Vite projects)
2. Create a test file with .test.js or .spec.js suffix in the same directory as your component or in a __tests__ folder
3. Import your component and the test renderer: import renderer from 'react-test-renderer' (Jest) or import { render } from '@testing-library/react' (Testing Library)
4. Write a test function that renders the component with renderer.create() or render() and call .toMatchSnapshot() on the result
5. Run npm test -- --updateSnapshot (or jest --updateSnapshot) to generate the initial snapshot file — this creates a __snapshots__ folder with .snap files
6. Review the generated .snap file in version control to verify the output looks correct
7. On subsequent test runs, npm test will compare component output against the stored snapshot
8. When you intentionally change a component's output, run npm test -- -u to update snapshots after verifying the changes are correct

Code

// Button.test.js — Jest with react-test-renderer
import renderer from 'react-test-renderer';
import Button from './Button';

describe('Button Component', () => {
  it('renders correctly with default props', () => {
    const tree = renderer
      .create(<Button label="Click me" />)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('renders correctly when disabled', () => {
    const tree = renderer
      .create(<Button label="Disabled" disabled />)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('renders correctly with children', () => {
    const tree = renderer
      .create(
        <Button>
          <span>Custom content</span>
        </Button>
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

// Card.test.js — Testing Library approach (more flexible)
import { render } from '@testing-library/react';
import Card from './Card';

describe('Card Component', () => {
  it('renders card snapshot', () => {
    const { container } = render

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change