Snapshot Testing with Jest

Introduction

In the world of modern frontend development, maintaining a consistent and reliable user interface is just as important as implementing new features. React applications, by nature, are made up of many reusable and interactive components. As your app grows, it becomes challenging to ensure that a component’s structure or output doesn’t change unexpectedly during updates.

This is where snapshot testing—a powerful feature of Jest—comes into play.

Snapshot testing is a method to verify that a UI component’s rendered output remains consistent over time. It’s especially useful for React components that rely on static or predictable render output.

With snapshot testing, you can capture the rendered output of a component and compare it to a previously saved snapshot. If the output changes unintentionally, Jest will alert you, allowing you to catch UI regressions before they reach production.

This post will walk through everything you need to know about snapshot testing in Jest, including setup, workflow, updating snapshots, and best practices for using it effectively in React applications.

What is Snapshot Testing?

Snapshot testing is a technique that records the output of your component (the “snapshot”) and stores it in a separate file.

When you run your test suite again, Jest compares the new output to the stored snapshot. If they match, the test passes; if they differ, the test fails, signaling that something has changed in the component’s rendered output.

This approach ensures that UI changes are intentional and that developers are aware of any visual or structural modifications.

Snapshot testing works well with React Testing Library, which allows you to render React components and capture their virtual DOM output.

How Snapshot Testing Works

Let’s break down how snapshot testing works under the hood:

Render the Component
The component is rendered using a testing utility like @testing-library/react or react-test-renderer.
Capture the Output
The rendered output is serialized into a JSON-like structure that represents the component’s DOM tree.
Save the Snapshot
The serialized output is stored in a .snap file inside a __snapshots__ folder.
Compare on Re-run
When the test is re-run, Jest compares the newly rendered output to the saved snapshot.
Report Differences
If the outputs differ, Jest highlights the difference and asks whether to accept or reject the new snapshot.

This process helps ensure that your components render as expected after code changes or refactoring.

Setting Up Snapshot Testing in React

Before writing a snapshot test, you’ll need to ensure that Jest and React Testing Library are installed in your project.

Installation

If you created your app using Create React App, Jest and React Testing Library are already included.

Otherwise, install them manually:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

You may also add a test script to your package.json:

"scripts": {
  "test": "jest"
}

Once setup is complete, you’re ready to create your first snapshot test.

Creating Your First Snapshot Test

Let’s create a simple React component and write a snapshot test for it.

Component Example

// MyComponent.jsx
import React from 'react';

function MyComponent() {
  return (
&lt;div&gt;
  &lt;h2&gt;Hello, Snapshot Testing!&lt;/h2&gt;
  &lt;p&gt;This is a simple example of a React component.&lt;/p&gt;
&lt;/div&gt;  );
}

export default MyComponent;

Snapshot Test Example

// MyComponent.test.js
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('matches snapshot', () => {
  const { asFragment } = render(<MyComponent />);
  expect(asFragment()).toMatchSnapshot();
});

Explanation of the Code

Let’s understand each line of the test code:

Import the necessary utilities
The render method from @testing-library/react renders the component into a virtual DOM.
Render the Component
The asFragment() method returns a snapshot representation of the component’s DOM structure.
Match the Snapshot
The expect(asFragment()).toMatchSnapshot() method compares the rendered output with the saved snapshot.
Save the Snapshot File
When this test runs for the first time, Jest saves a snapshot in a folder named __snapshots__.

Running the Snapshot Test

You can now run your test using the Jest command:

npm test

On the first run, Jest will generate a snapshot file automatically.

You’ll find this file in a new folder structure like:

src/
  MyComponent.jsx
  MyComponent.test.js
  __snapshots__/
MyComponent.test.js.snap

The .snap file contains a serialized version of your component’s output.

Snapshot File Example

Here’s what the .snap file might look like:

// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[matches snapshot 1] = `
<DocumentFragment>
  <div>
&lt;h2&gt;
  Hello, Snapshot Testing!
&lt;/h2&gt;
&lt;p&gt;
  This is a simple example of a React component.
&lt;/p&gt;  </div>
</DocumentFragment>
`;

This file represents the rendered DOM structure at the time of the snapshot.

When Component Output Changes

Snapshots are meant to represent the expected UI.

If you modify your component later, Jest will detect that the new render output no longer matches the stored snapshot.

Example: Updating the Component

// MyComponent.jsx
function MyComponent() {
  return (
&lt;div&gt;
  &lt;h2&gt;Hello, Snapshot Testing Updated!&lt;/h2&gt;
  &lt;p&gt;This content has changed.&lt;/p&gt;
&lt;/div&gt;  );
}

When you rerun your test, you’ll see an output like this:

Snapshot name: matches snapshot

- Snapshot 1
+ Received 1

- <h2>
-   Hello, Snapshot Testing!
- </h2>
+ <h2>
+   Hello, Snapshot Testing Updated!
+ </h2>

Jest shows the difference between the old and new snapshots, helping you determine whether the change was intentional.

Updating Snapshots

If the change in your component is intentional, you can update the snapshot with a simple command:

npm test -- -u

jest -u

This command regenerates all outdated snapshots and saves them as the new reference.

You should only update snapshots when you are sure that the change reflects a correct and expected modification in your UI.

When to Use Snapshot Testing

Snapshot testing is best suited for certain types of components.

Use Snapshots For:

Presentational Components – Components that focus on static layout or visual design.
Reusable UI Elements – Buttons, forms, modals, and headers.
Simple Functional Components – Components that do not rely on dynamic or external state.
Static Pages – When verifying that static layouts remain consistent over time.

Avoid Snapshots For:

Highly Dynamic Components – Components that change frequently or rely on API data.
Interactive Components – Components with user inputs, animations, or real-time updates.
Complex State-Driven Logic – Components whose structure changes based on state conditions.

Snapshot tests should complement—not replace—your other testing strategies like unit tests and integration tests.

Combining Snapshot Testing with Props

Snapshot testing can also help ensure that components render correctly with different props.

Example: Props Snapshot

// Greeting.jsx
function Greeting({ name }) {
  return <h3>Hello, {name}!</h3>;
}

export default Greeting;

// Greeting.test.js
import { render } from '@testing-library/react';
import Greeting from './Greeting';

test('renders correctly with different props', () => {
  const { asFragment } = render(<Greeting name="Alice" />);
  expect(asFragment()).toMatchSnapshot();
});

Running this test saves a snapshot of the rendered output based on the provided props. If the prop values or structure change, Jest will flag it during future test runs.

Testing Conditional Rendering

Snapshot testing also works well for components that render different UI structures based on conditions.

Example: Conditional Component

// Status.jsx
function Status({ isOnline }) {
  return <p>{isOnline ? 'User is online' : 'User is offline'}</p>;
}

export default Status;

// Status.test.js
import { render } from '@testing-library/react';
import Status from './Status';

test('renders online status correctly', () => {
  const { asFragment } = render(<Status isOnline={true} />);
  expect(asFragment()).toMatchSnapshot();
});

test('renders offline status correctly', () => {
  const { asFragment } = render(<Status isOnline={false} />);
  expect(asFragment()).toMatchSnapshot();
});

This approach ensures that both rendering paths remain consistent across code changes.

Integrating Snapshot Testing in Continuous Integration (CI)

Snapshot tests can easily be integrated into your CI/CD pipeline.

When a test fails in CI:

It signals an unintended UI change.
The developer must review the change and confirm if it’s valid.
If valid, update snapshots and push the changes.

This ensures your team maintains consistent UI output throughout the development process.

Snapshot Testing with Styled Components

Snapshot testing also works with styling libraries such as styled-components or emotion.

By combining Jest with libraries like jest-styled-components, you can ensure that your component’s styles don’t change unexpectedly.

Example

npm install --save-dev jest-styled-components

Then, include it in your test:

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

const Button = styled.button`
  color: white;
  background: blue;
`;

test('matches styled snapshot', () => {
  const { asFragment } = render(<Button>Click Me</Button>);
  expect(asFragment()).toMatchSnapshot();
});

This test captures both the HTML and CSS styling output.

Best Practices for Snapshot Testing

Snapshot testing can become problematic if not used wisely. Follow these best practices to keep your tests maintainable and meaningful.

1. Keep Snapshots Small

Avoid testing large or deeply nested components. Snapshots that are too big are hard to review.

2. Use Descriptive Test Names

Name your tests based on what they validate.

Example:

test('renders the login form correctly', () => { ... });

3. Review Snapshots Before Updating

Never update snapshots blindly. Always review the changes to ensure they are intentional.

4. Limit Usage to Static Components

Use snapshots mainly for components whose structure is unlikely to change often.

5. Commit Snapshot Files to Version Control

Snapshot files should be committed to your repository so that teammates can review them in pull requests.

6. Avoid Testing Dynamic Data

Snapshot tests should not rely on API data or timestamps, as this will cause inconsistent test results.

7. Combine with Other Test Types

Use snapshot tests along with unit, integration, and end-to-end tests for full coverage.

Debugging Snapshot Failures

When snapshot tests fail, it can mean one of two things:

The component changed intentionally.
→ Update the snapshot using npm test -- -u.
The component changed unintentionally.
→ Investigate the cause, fix the component, and re-run the test.

You can also use Jest’s interactive snapshot update mode to selectively update only specific snapshots.

Advantages of Snapshot Testing

Fast and Easy Setup – Simple to integrate and write.
Great for Regression Testing – Detects unexpected UI changes quickly.
Readable and Maintainable – Snapshots are easy to compare in diffs.
Supports Any Render Output – Works for HTML, React Native, or even JSON output.
Improves Developer Confidence – Ensures visual consistency over time.

Limitations of Snapshot Testing

While snapshot testing is powerful, it’s not without drawbacks:

Overuse Can Lead to Noise – Too many snapshots make it hard to identify meaningful changes.
Not a Replacement for Logic Tests – Doesn’t verify functionality or interactions.
Large Snapshots Are Hard to Review – Long outputs are difficult to track manually.
Requires Human Validation – Developers must manually confirm valid UI changes.

Hence, snapshot testing should complement, not replace, your traditional test suite.

Snapshot Testing in Real-World Projects

In large-scale applications, snapshot testing is often used for:

Design system components (buttons, cards, modals)
Page templates in CMS-driven apps
Static marketing pages
Layout consistency validation after dependency upgrades

For instance, in design systems like Material UI or Chakra UI, snapshot tests ensure that visual consistency remains intact across multiple releases.

Snapshot Testing Workflow Summary

Write a test using toMatchSnapshot().
Run the test with npm test.
Review and commit the generated snapshot.
When code changes, re-run the test.
If the snapshot fails, review the diff.
If the change is valid, update the snapshot with npm test -- -u.