Testing an application is not only about checking return values.

Sometimes, you also need to check what your code produces.

This is especially useful when working with React components, HTML output, objects, or other structured data.

This is where Jest snapshot testing can help.

Snapshot testing allows Jest to save a representation of your output and compare it with the output produced during future test runs.

If something changes, Jest tells you about the difference.

In this guide, you will learn what snapshot testing is, how it works, how to create and update snapshots, and when you should or should not use them.

---

What Is Snapshot Testing in Jest?

Snapshot testing is a testing technique where Jest saves a snapshot of your output and compares it with future results.

Think of a snapshot as a saved copy of what your code produced at a particular point in time.

For example, suppose a component produces this output:

<div>
    <h1>Hello World</h1>
</div>

Jest can save this output as a snapshot.

The next time the test runs, Jest generates the output again and compares it with the saved snapshot.

If both outputs match, the test passes.

If they are different, Jest reports the difference.

---

Why Use Snapshot Testing?

Without snapshot testing, you may need to write many individual assertions.

For example:

expect(element.type).toBe("div");
expect(element.children.length).toBe(1);
expect(element.children[0].type).toBe("h1");

A snapshot can capture the complete structure in one test.

This can be useful when you want to know whether a large output has changed unexpectedly.

Snapshot testing can help you:

• Detect unexpected UI changes
• Test component output
• Track structured data
• Catch accidental changes
• Review changes in generated output

---

How Does Jest Snapshot Testing Work?

The basic process is simple.

Step 1: Generate the output

Your test runs the code you want to check.

Step 2: Create a snapshot

Jest saves the output in a snapshot file.

Step 3: Run the test again

Jest generates the output again.

Step 4: Compare the results

Jest compares the new output with the saved snapshot.

If they match, the test passes.

If they are different, the test fails.

---

A Simple Snapshot Test

Let’s start with a basic example.

Suppose you have an object:

const user = {
    name: "John",
    age: 25,
    role: "Developer"
};

You can create a snapshot test using:

test("matches user snapshot", () => {
    expect(user).toMatchSnapshot();
});

When you run the test for the first time, Jest creates a snapshot.

The snapshot is usually stored inside a __snapshots__ directory.

You may see a file similar to:

user.test.js.snap

The snapshot contains the expected output.

---

What Does a Snapshot File Look Like?

A generated snapshot might look something like this:

exports[`matches user snapshot 1`] = `
{
  "age": 25,
  "name": "John",
  "role": "Developer",
}
`;

You normally do not need to create this file manually.

Jest creates and manages it for you.

---

Running Snapshot Tests

Suppose your test file is:

user.test.js

Run Jest normally:

npm test

If this is the first time the snapshot is created, Jest stores the snapshot.

Future test runs compare the current output with that snapshot.

---

What Happens When a Snapshot Changes?

Let’s change the user:

const user = {
    name: "John",
    age: 30,
    role: "Developer"
};

Previously, the age was:

25

Now it is:

30

Jest detects the difference.

Your test will fail because the current output does not match the saved snapshot.

Jest shows you the difference so you can decide what to do.

---

Updating a Snapshot

Sometimes a snapshot failure is expected.

For example, you intentionally changed your component.

In that situation, you can update the snapshot.

Run:

npm test -- -u

Or:

npx jest -u

The -u option tells Jest to update the snapshots.

After updating, future tests will compare the output against the new snapshot.

Important

Do not blindly update snapshots whenever a test fails.

First, check why the snapshot changed.

If the change is accidental, updating the snapshot can hide a real bug.

---

Snapshot Testing With React

Snapshot testing is commonly associated with React components.

For example, imagine a simple React component:

function Welcome() {
    return (
        <div>
            <h1>Welcome!</h1>
            <p>Thanks for visiting.</p>
        </div>
    );
}

A snapshot test can capture the rendered structure.

Depending on your React testing setup, you can render the component and create a snapshot of the result.

For example, with a renderer:

import renderer from "react-test-renderer";

test("Welcome component matches snapshot", () => {
    const tree = renderer
        .create(<Welcome />)
        .toJSON();

    expect(tree).toMatchSnapshot();
});

The first test creates a snapshot.

Later, Jest compares the rendered component with that snapshot.

---

Snapshot Testing With Props

Snapshot testing can also be useful when a component receives props.

Consider:

function UserCard({ name, role }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{role}</p>
        </div>
    );
}

You could render:

<UserCard
    name="John"
    role="Developer"
/>

and create a snapshot.

If someone later changes the component structure, the snapshot test can show that the output has changed.

---

Inline Snapshots

Jest also supports inline snapshots.

Instead of storing the snapshot in a separate .snap file, the snapshot can be placed directly inside your test file.

For example:

test("matches inline snapshot", () => {
    expect({
        name: "John",
        age: 25
    }).toMatchInlineSnapshot();
});

Jest can automatically add the snapshot to the test file.

This can make small snapshots easier to see because the test and expected output are together.

---

Snapshot Testing Objects

Snapshots are not limited to UI.

You can also snapshot JavaScript objects.

For example:

test("user data matches snapshot", () => {
    const user = {
        id: 1,
        name: "John",
        email: "john@example.com"
    };

    expect(user).toMatchSnapshot();
});

Jest stores a snapshot of the object.

If the object’s structure changes later, Jest can detect the difference.

---

Snapshot Testing Arrays

You can also snapshot arrays.

test("users match snapshot", () => {
    const users = [
        "John",
        "Mike",
        "Sarah"
    ];

    expect(users).toMatchSnapshot();
});

If someone adds or removes a user, the snapshot will change.

This can be useful when the exact structure of the data is important.

---

Snapshot Testing API Responses

Snapshots can also be used for structured API responses.

For example:

test("API response matches snapshot", async () => {
    const response = await getUsers();

    expect(response).toMatchSnapshot();
});

This allows you to detect unexpected changes in the response structure.

However, you should be careful with API snapshots.

If the API contains changing data such as timestamps or IDs, the snapshot may change frequently.

In those situations, normal assertions may be a better choice.

---

Handling Dynamic Values in Snapshots

One problem with snapshots is dynamic data.

Consider:

const user = {
    name: "John",
    createdAt: new Date()
};

The createdAt value changes every time the test runs.

That means the snapshot can fail even though your application is working correctly.

Jest provides property matchers to handle values like this.

For example:

expect(user).toMatchSnapshot({
    createdAt: expect.any(Date)
});

This tells Jest that createdAt should be a Date instead of requiring an exact value.

This is useful for:

• Dates
• Random IDs
• Generated values
• Timestamps
• Other dynamic data

---

Snapshot Testing vs Normal Assertions

Both techniques are useful, but they serve different purposes.

Normal assertion

expect(user.name).toBe("John");

This checks one specific thing.

Snapshot assertion

expect(user).toMatchSnapshot();

This checks the complete structure against a saved snapshot.

Normal assertions are usually better when you care about specific behavior.

Snapshots are useful when the complete structure or output is important.

---

When Should You Use Snapshot Testing?

Snapshot testing works well when the output is:

• Structured
• Relatively stable
• Large enough that many individual assertions would be repetitive
• Important to keep consistent

Common examples include:

React components

Snapshots can help detect unexpected UI structure changes.

Generated objects

Useful when an object has many properties.

Serialized data

Snapshots can help detect changes in generated output.

Configuration output

Useful when configuration objects need to maintain a known structure.

---

When Should You Avoid Snapshot Testing?

Snapshot testing is not the best choice for every test.

Avoid using snapshots when:

The output changes frequently

If the snapshot changes every time the test runs, it provides little value.

The snapshot is too large

Huge snapshots can be difficult to review.

You only care about one value

If you only need to check a single property, use a normal assertion.

For example:

expect(user.name).toBe("John");

There is no need for a snapshot.

The snapshot is difficult to understand

If developers cannot quickly understand why a snapshot failed, a few clear assertions may be better.

---

Snapshot Testing Best Practices

1. Keep Snapshots Small

Small snapshots are easier to read and review.

Avoid snapshotting huge objects or entire application states unless necessary.

---

2. Review Snapshot Changes

When a snapshot fails, do not immediately run:

npx jest -u

First, understand what changed.

Ask yourself:

Was this change intentional?

If yes, update the snapshot.

If not, investigate the code.

---

3. Use Snapshots for Stable Output

Snapshots work best when the output does not change constantly.

For frequently changing values, use property matchers or normal assertions.

---

4. Don’t Use Snapshots for Everything

A test suite should not contain snapshots for every function.

Use snapshots where they provide a clear benefit.

---

5. Keep Snapshots Readable

If a snapshot becomes extremely large, consider testing smaller parts of the output instead.

Readable tests are easier to maintain.

---

Common Mistakes With Jest Snapshots

Updating snapshots without checking the failure

This can hide real bugs.

Creating huge snapshots

Large snapshots are difficult to review.

Snapshotting dynamic data

Values such as timestamps and random IDs can cause unnecessary failures.

Using snapshots instead of behavior tests

A snapshot tells you that something changed. It does not always tell you whether the new behavior is correct.

Creating snapshots for simple values

For a simple value, a normal assertion is usually clearer.

For example:

expect(add(2, 3)).toBe(5);

is better than creating a snapshot for 5.

---

Snapshot Testing in a Real Project

Imagine you are working on a React application.

You have a ProductCard component.

function ProductCard({ name, price }) {
    return (
        <div className="product-card">
            <h2>{name}</h2>
            <p>₹{price}</p>
        </div>
    );
}

You can create a snapshot to make sure its structure does not change unexpectedly.

Later, another developer changes:

<h2>{name}</h2>

to:

<h3>{name}</h3>

The snapshot test can detect the change.

Jest shows the difference.

Now the developer can decide whether the change was intentional.

This is one of the main benefits of snapshot testing.

---

Snapshot Testing Is Not a Replacement for Other Tests

This is important.

Snapshot tests should not replace all other types of testing.

For example, suppose a button should call a function when clicked.

A snapshot may show the button’s structure, but it does not prove that clicking the button works correctly.

You still need a behavioral test:

fireEvent.click(button);

expect(handleClick).toHaveBeenCalled();

A good test suite combines different testing techniques.

Use:

• Unit tests for individual pieces of logic
• Behavior tests for user interactions
• Integration tests for multiple parts working together
• Snapshot tests for stable output and structure

---

Snapshot Testing: Quick Reference

Jest Feature	Purpose
toMatchSnapshot()	Compare output with a saved snapshot
toMatchInlineSnapshot()	Store snapshot directly in the test
-u	Update failing snapshots
expect.any()	Match dynamic value types
.snap file	Stores external snapshots
__snapshots__	Directory where Jest stores snapshots

---

Frequently Asked Questions

What is snapshot testing in Jest?

Snapshot testing saves a representation of your output and compares future test results against it.

Where does Jest store snapshots?

External snapshots are normally stored in .snap files inside a __snapshots__ directory.

How do I update a Jest snapshot?

You can run:

npx jest -u

or use the equivalent update option with your test command.

Are Jest snapshots only for React?

No. Snapshots can be used for objects, arrays, serialized data, and other structured output. They are commonly used with React because they can capture component output.

Should I use snapshot testing for everything?

No. Use snapshots when they make a test easier to maintain and review. For simple values or specific behavior, normal assertions are usually clearer.

Why does my snapshot keep failing?

The output may have changed. This could be an intentional code change, an unexpected bug, or dynamic data such as timestamps and random values.

Are snapshot tests enough for UI testing?

No. Snapshot tests can detect structural changes, but they do not replace tests for user interactions and application behavior.

---

Conclusion

Jest snapshot testing is a useful way to detect unexpected changes in structured output.

The basic idea is simple:

Jest saves the expected output and compares future output against it.

The main method is:

expect(value).toMatchSnapshot();

Snapshot testing can be especially useful for React components and other stable, structured output.

However, snapshots should be used carefully.

Keep them small, review changes before updating them, and avoid using snapshots for everything.

When combined with unit and behavioral tests, snapshot testing can become a useful part of a reliable Jest test suite.