Using Jest For React Based Snapshot Tests

Writing Snapshot Tests for React Components Using Jest

When I started using snapshot testing for React, the biggest challenge wasn’t whether to use it, but how to use it without creating noise.

Poorly structured snapshots, fragile tooling, and unclear diffs can quickly turn a useful safety net into something teams stop paying attention to.

Jest gave me a more reliable way to approach React snapshot testing. Its tight integration with React and simple snapshot workflows made it easier to focus on meaningful component changes instead of chasing false positives or constantly updating snapshots.

In this article, I’ll share how I approach React snapshot testing with Jest, covering setup, best practices, and how tools like BrowserStack Percy help extend snapshot testing beyond local environments.

What is Snapshot Testing?

Snapshot testing is a way to capture the output of a component at a specific point in time and store it as a reference. When the test runs again, the new output is compared against the stored snapshot to detect any changes.

Instead of asserting individual values or DOM properties, snapshot tests focus on the overall structure and rendered result. This makes them especially useful for UI components, where small changes can be hard to validate with traditional assertions.

When used thoughtfully, snapshot testing helps surface unintended changes early, while still allowing intentional updates to be reviewed and approved as part of the development workflow.

Snapshot Testing in Jest

Snapshot testing in Jest allows you to capture the rendered output of React components and compare it across test runs. Instead of asserting individual DOM elements or props, Jest snapshots help detect unexpected structural or UI changes with minimal test code. This makes them especially useful for component testing.

What Are Jest Snapshots

Jest snapshots are stored representations of a component’s rendered output at a specific point in time. When a snapshot test runs for the first time, Jest saves the output into a .snap file. On subsequent runs, Jest compares the new output against this stored snapshot.

If the output changes, the test fails and Jest highlights the difference. This forces an explicit decision, either accept the change by updating the snapshot or investigate a potential regression.

Example: basic Jest snapshot test

import renderer from 'react-test-renderer';

import Button from './Button';



test('renders Button correctly', () => {

  const tree = renderer.create(<Button label="Submit" />).toJSON();

  expect(tree).toMatchSnapshot();

});

Prerequisites

Before writing snapshot tests with Jest, a few foundational pieces must be in place. These ensure that snapshot tests run consistently and produce readable, maintainable output.

At a minimum, you’ll need:

• A React application set up locally
• Node.js and npm or yarn installed
• Jest installed and configured in the project
• A basic understanding of React components and testing concepts

Install React Application

If you don’t already have a React app, you can quickly scaffold one using Create React App. This setup includes Jest out of the box, which simplifies snapshot testing.

Example: creating a React app

npx create-react-app react-snapshot-demo

cd react-snapshot-demo

npm start

Create React App comes preconfigured with Jest, so no additional setup is required to begin writing snapshot tests.

Configure Jest Into Project

If you’re not using the Create React App, Jest needs to be configured manually. This involves installing Jest and setting up basic configuration for React testing.

Install Jest and related dependencies

npm install --save-dev jest react-test-renderer

Basic Jest configuration

// jest.config.js

module.exports = {

  testEnvironment: 'jsdom',

};

This configuration ensures that React components can be rendered in a browser-like environment during snapshot tests.

Managing Snapshot Changes

Snapshot tests are designed to fail when output changes. The key is managing those changes intentionally instead of blindly updating snapshots.

When a snapshot test fails, Jest shows a diff of what changed. At that point, you should:

• Review the diff carefully
• Confirm whether the change is expected
• Update the snapshot only if the change is intentional

Update snapshots intentionally

jest --updateSnapshot

or

jest -u

This approach ensures snapshots remain meaningful indicators of real UI changes.

Creating Additional Snapshot Tests

As applications grow, snapshot tests should remain focused and scoped. Instead of creating large snapshots for entire pages, it’s better to create smaller, targeted snapshots for individual components or states.

Example: snapshot test for multiple component states

test('renders Button disabled state correctly', () => {

  const tree = renderer

    .create(<Button label="Submit" disabled />)

    .toJSON();

  expect(tree).toMatchSnapshot();

});

Creating multiple snapshot tests for different component states improves coverage while keeping snapshots readable and easier to review.

Writing Snapshot Tests Using React

Writing snapshot tests in React focuses on capturing a component’s rendered output in a predictable and repeatable way. The goal is not to test behavior or logic in depth, but to detect unintended changes in how components render as code evolves.

When structured correctly, React snapshot tests are easy to read, simple to maintain, and effective at surfacing UI regressions early.

Writing React Components

Snapshot testing works best with small, focused React components that render consistently based on props. Components with heavy side effects or dynamic data should be simplified or mocked to keep snapshots stable.

Example: simple React component

const Alert = ({ type, message }) => {

  return (

    <div className={`alert alert-${type}`}>

      {message}

    </div>

  );

};



export default Alert;

Keeping components predictable makes snapshot output easier to understand and reduces false positives during test runs.

Using Jest’s Snapshot Features

Jest provides built-in matchers that make snapshot testing straightforward. The most commonly used matcher is toMatchSnapshot(), which captures and compares component output automatically.

Example: snapshot test using Jest

import renderer from 'react-test-renderer';

import Alert from './Alert';



test('renders success alert correctly', () => {

  const tree = renderer

    .create(<Alert type="success" message="Saved successfully" />)

    .toJSON();

  expect(tree).toMatchSnapshot();

});

Jest also supports inline snapshots, which store snapshots directly in the test file, making small snapshots easier to review.

Updating Snapshots in Jest

When a snapshot test fails, it usually means the component output has changed. If the change is expected, the snapshot needs to be updated to reflect the new baseline.

Jest provides a controlled way to update snapshots, ensuring changes are intentional rather than accidental.

Example: updating snapshots

jest --updateSnapshot

or simply:

jest -u

Snapshot updates should always be reviewed to confirm they represent valid UI changes.

Interactive Snapshot Mode in Jest

Interactive snapshot mode helps manage multiple snapshot failures more safely. Instead of updating all snapshots at once, Jest prompts you to review each failure individually.

In interactive mode, you can:

• Update specific snapshots
• Skip updates for snapshots that need investigation
• Review diffs before accepting changes

This mode is especially useful in larger projects where snapshot changes can affect multiple components at once.

Importance of Snapshot Testing React Components with Jest

Snapshot testing plays a critical role in maintaining UI stability in React applications, especially as components evolve rapidly. When combined with Jest, snapshot testing becomes a lightweight yet powerful way to detect unintended changes early, without adding complex assertions or heavy maintenance overhead.

Why snapshot testing React components with Jest matters:

• Early detection of unintended UI changes: Jest snapshots flag even subtle changes in component output during development, long before they reach staging or production. This helps teams catch visual regressions early, reducing costly fixes and last-minute UI reviews.
• Simplifies testing complex component structures: React components often render deeply nested structures that are difficult to validate with traditional assertions. Snapshot tests capture the entire rendered output at once, making it easier to verify complex layouts with minimal test code.
• Encourages intentional UI changes: Snapshot failures force developers and testers to explicitly review and approve UI changes. This makes visual updates more deliberate and prevents accidental regressions from being silently introduced into the codebase.
• Reduces manual UI validation effort: By automating checks for component output, snapshot testing reduces reliance on manual visual inspections during development and code reviews, saving time while improving consistency.
• Improves confidence during refactoring: When refactoring components, snapshot tests act as a safety net. If the output remains the same, snapshots pass. If something changes unexpectedly, the failure highlights exactly where attention is needed.

How to Conduct Jest Snapshot Testing Using BrowserStack Percy

BrowserStack Percy is a visual testing software that adds intelligence and scale to snapshot testing. While Jest snapshots are great for detecting structural changes at the component level, Percy focuses on how those components actually render across browsers and environments.

It captures visual snapshots during test runs and compares them against approved baselines using visual AI, not brittle pixel-by-pixel diffs.

For Jest-based workflows, Percy complements snapshot tests by reducing false positives and making visual changes easier to review. Instead of manually inspecting large .snap files, teams get clear, side-by-side visual diffs with context. Percy’s AI understands layout and rendering intent, which helps ignore insignificant noise while highlighting real UI regressions.

Percy also fits naturally into CI pipelines and team workflows, with flexible pricing that scales from individual developers to large enterprises, making it practical to adopt visual snapshot testing without heavy operational overhead.

Scale your UI Instantly

Drive 5x faster results with your usual snapshot testing framework using Percy’s AI visual engine and real device testing.

• Visual Review Agent
• Real Device Cloud of 50,000+ Devices
• Advanced Snapshot Stabilization
• Automatic Visual Diff Identification

Talk to an Expert Learn more

How to Conduct Jest Snapshot Testing Using BrowserStack Percy

Below is a step-by-step workflow that shows how to integrate Percy into an existing Jest snapshot testing setup.

Step 1: Create a Percy Project and Get the Token

Start by creating a project in the Percy dashboard. Percy will generate a unique project token, which is used to associate snapshots with the correct project.

Set the token as an environment variable so it’s available locally and in CI.

export PERCY_TOKEN=your_percy_project_token

This keeps credentials secure and avoids hardcoding sensitive data.

Step 2: Install Percy Dependencies

Install Percy’s CLI along with the Jest integration dependencies.

npm install --save-dev @percy/cli @percy/jest

The CLI handles snapshot uploads and comparisons, while the Jest package hooks Percy into your existing test runs.

Step 3: Wrap Jest Test Execution with Percy

Instead of running Jest directly, execute it through Percy’s CLI. This allows Percy to capture snapshots during the test run.

npx percy exec -- jest

Jest tests still run as usual, but Percy now listens for snapshot events and uploads visual snapshots automatically.

Step 4: Capture Visual Snapshots in Jest Tests

In addition to Jest’s serialized snapshots, you can trigger Percy visual snapshots at meaningful points. This is commonly done when rendering React components in a test environment.

Example: rendering a component and capturing a Percy snapshot

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

import { percySnapshot } from '@percy/jest';

import Button from './Button';



test('Button visual snapshot', async () => {

  render(<Button label="Submit" />);

  await percySnapshot('Button - default state');

});

This captures a visual snapshot of the rendered component and sends it to Percy for comparison.

Step 5: Review Visual Diffs in Percy Dashboard

After the test run completes, Percy compares the new snapshots against approved baselines. Any visual changes are flagged and displayed as side-by-side diffs in the Percy dashboard.

From here, you can:

• Inspect visual changes
• Approve intentional updates
• Reject unexpected regressions

Step 6: Integrate Percy into CI Pipelines

Add the Percy command to your CI configuration so visual snapshot testing runs on every pull request.

npx percy exec -- jest

Percy can be configured to block merges until visual changes are reviewed, ensuring UI regressions don’t reach production unnoticed.

Step 7: Maintain and Update Baselines Intentionally

As UI evolves, approve new snapshots in Percy to update baselines. This keeps visual history clean and ensures future comparisons remain meaningful.

Treat Percy approvals the same way you treat code reviews, only accept changes you fully understand.

Factors to Consider When Writing Snapshot Tests

Snapshot tests are powerful, but only when written with intent. Poorly scoped snapshots can create noise, false positives, and maintenance overhead. The following considerations help ensure your snapshot tests stay reliable, meaningful, and easy to manage over time.

• Snapshot Scope and Granularity: Keep snapshots focused on a single component or UI state. Large, deeply nested snapshots make reviews difficult and increase the risk of approving unintended changes that slip through unnoticed.
• Stability of the UI Output: Avoid snapshotting dynamic data such as timestamps, random IDs, animations, or API-driven content. Unstable values lead to flaky snapshots and frequent, low-value updates that reduce trust in test results.
• Meaningful Snapshot Names: Use descriptive snapshot names that clearly indicate the component and state being tested. This makes it easier to understand failures, review visual diffs, and trace changes back to specific scenarios.
• Balance Between Snapshot and Assertion Tests: Don’t rely solely on snapshots for validation. Combine snapshot tests with explicit assertions for logic, accessibility, and behavior to ensure snapshots complement, rather than replace, functional testing.
• Review Before Updating Snapshots: Treat snapshot updates as a review activity, not a reflex action. Always inspect diffs carefully to confirm changes are intentional, especially when updating baselines in Jest or approving visuals in Percy.
• Component Maturity and Change Frequency: Snapshot testing works best for stable or reusable components. Highly experimental or rapidly changing components may generate excessive churn, making snapshots more costly than beneficial.
• Integration With CI and Visual Tools: Ensure snapshots run consistently in CI and, where possible, pair Jest snapshots with visual tools like Percy. This adds visual context and reduces the risk of approving broken UI changes blindly.

Conclusion

Snapshot testing with Jest gives React testers a practical way to validate UI changes without slowing development down. When written with the right scope and paired with disciplined review practices, snapshots act as a safety net that catches unintended changes before they reach production.

By combining Jest’s snapshot capabilities with visual testing platforms like BrowserStack Percy, teams can go beyond raw diffs and gain visual clarity powered by AI. The result is faster feedback, fewer false positives, and UI tests that scale confidently with modern React applications.