Jest Snapshot Test Stub Builder

Snapshot tests without the boilerplate

A snapshot test renders a component, serializes the result, and stores it so future renders are compared against the saved version. The setup — importing the component, choosing a renderer, wrapping in describe/test, and calling toMatchSnapshot() — is the same every time. This builder writes that scaffold for you so you can focus on the props and mocks that matter.

How it works

The tool generates a *.test.tsx file. It imports React, your component from the path you provide, and the renderer you choose. For React Test Renderer it calls renderer.create(<Component />).toJSON() and asserts expect(tree).toMatchSnapshot(). For React Testing Library it calls render(<Component />) and asserts expect(container.firstChild).toMatchSnapshot(). Everything is wrapped in a describe('<ComponentName />', () => { ... }) block with a single test('matches snapshot', ...), plus a commented placeholder where you add props or mocks. The first jest run writes the snapshot into a sibling __snapshots__ directory.

Tips and example

• Keep props realistic but minimal so the snapshot stays readable.
• For components that use context or routing, wrap them in the provider inside the render call.
• Re-run with jest -u only after reviewing the diff to confirm the change was intentional.

import renderer from "react-test-renderer";
import Button from "./Button";

describe("<Button />", () => {
  test("matches snapshot", () => {
    const tree = renderer.create(<Button label="Save" />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});