DEV Community

Cover image for A Guide to Snapshot Testing React Native Components Using Jest
Biswas Prasana Swain
Biswas Prasana Swain

Posted on

1

A Guide to Snapshot Testing React Native Components Using Jest

#programming #javascript #beginners #testing

Imagine you build a beautiful React Native button, and you want to make sure its structure never accidentally changes as your app grows.

Wouldn't it be cool if there was a way to take a "photo" of your component, and later automatically check if it still looks the same?

That's exactly what snapshot testing does!

In this guide, you’ll learn:

  • What snapshot testing is
  • Why it’s useful
  • How to set it up
  • How to write your first snapshot test
  • Common mistakes and best practices

Let’s start from scratch. 📸

What is Snapshot Testing?

Think of snapshot testing like taking a picture of your component’s output (its structure and UI code).

Later, every time you run the test again, Jest will:

  • Take a new snapshot of the component
  • Compare it to the old snapshot
  • Tell you if anything has changed

If it changed unexpectedly, Jest will warn you:

"Hey! Your component looks different. Are you sure this is what you want?"

✅ It’s a quick way to detect unexpected changes in how your components are built.

Why Use Snapshot Testing?

Snapshot testing is great for:

  • UI components like buttons, cards, screens, etc.
  • Catching accidental UI changes before shipping
  • Code reviews: you can clearly see what changed in a component
  • Faster development: no need to manually check everything visually

It’s like having an automated "watchdog" for your app’s structure.

Setting Up Your Environment

If you used npx react-native init to create your app, Jest is already set up for you!

To be sure, check your package.json for:

"scripts": {
  "test": "jest"
},
"devDependencies": {
  "jest": "...",
  "@testing-library/react-native": "...",
  "react-test-renderer": "..."
}
Enter fullscreen mode Exit fullscreen mode

If anything’s missing, install them:

npm install --save-dev jest @testing-library/react-native react-test-renderer
Enter fullscreen mode Exit fullscreen mode

or

yarn add --dev jest @testing-library/react-native react-test-renderer
Enter fullscreen mode Exit fullscreen mode

Quick Overview: What Tools Are We Using?

Tool Purpose
Jest Runs the tests
react-test-renderer Renders the component to pure JavaScript object (not real device)
@testing-library/react-native (Optional) Helps simulate user actions

For basic snapshot testing, we mainly use Jest and react-test-renderer.

Writing Your First Snapshot Test

Let's say you have a simple Button component:

Button.js

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

export default function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={{ padding: 10, backgroundColor: 'blue' }}>
      <Text style={{ color: 'white' }}>{title}</Text>
    </TouchableOpacity>
  );
}
Enter fullscreen mode Exit fullscreen mode

Now, let’s write a snapshot test for it!

Button.test.js

import React from 'react';
import renderer from 'react-test-renderer'; // this is react-test-renderer
import Button from './Button';

test('Button renders correctly', () => {
  const tree = renderer.create(<Button title="Click me" onPress={() => {}} />).toJSON();
  expect(tree).toMatchSnapshot();
});
Enter fullscreen mode Exit fullscreen mode

What’s happening here?

  1. renderer.create() creates a fake "rendered" version of your component.
  2. .toJSON() turns it into a plain JavaScript object (representing the structure).
  3. expect(tree).toMatchSnapshot() saves the output into a snapshot file the first time.

The snapshot file looks like this (automatically generated):

Button.test.js.snap

exports[`Button renders correctly 1`] = `
<TouchableOpacity
  onPress={[Function]}
  style={
    Object {
      "backgroundColor": "blue",
      "padding": 10,
    }
  }
>
  <Text
    style={
      Object {
        "color": "white",
      }
    }
  >
    Click me
  </Text>
</TouchableOpacity>
`;
Enter fullscreen mode Exit fullscreen mode

You don't have to create this file manually — Jest handles it!

What Happens When Things Change?

Suppose you accidentally change the button’s color from blue to green in Button.js:

style={{ padding: 10, backgroundColor: 'green' }}
Enter fullscreen mode Exit fullscreen mode

When you run npm test, Jest will tell you:

Snapshot test failed!
Enter fullscreen mode Exit fullscreen mode

It will show you what changed — just like a side-by-side "before and after" comparison.

You’ll have two choices:

  • If the change was on purpose (you wanted it green), you can update the snapshot.
  • If the change was a mistake, you can fix the component to match the old snapshot.

How to Update Snapshots

If you intentionally changed your component (and want to accept the new version), just run:

npm test -- -u
Enter fullscreen mode Exit fullscreen mode

or

yarn test -u
Enter fullscreen mode Exit fullscreen mode

The -u flag tells Jest:

✅ "Update the snapshots with the new output."

When to Use Snapshot Testing (and When Not to)

Good for:

  • Simple components (Buttons, Cards, Badges)
  • Reusable UI components that don’t change often
  • Detecting unexpected UI changes

Not good for:

  • Components with lots of randomness (e.g., random colors, dynamic IDs)
  • Highly dynamic components (always different outputs)
  • Very large and complicated components (snapshots become hard to read)

🔵 Rule of Thumb:

Use snapshot testing for small to medium, stable UI components.

Best Practices for Snapshot Testing

Tip Why it helps
Keep components small and simple Easier-to-understand snapshots
Name your tests clearly Easier to know what failed
Only snapshot important parts Don’t snapshot whole screens with tons of logic
Regularly review snapshots manually Catch unwanted changes before accepting updates
Combine with other types of tests (like behavior tests) Don’t rely only on snapshots

Common Beginner Mistakes

Mistake Solution
Blindly updating snapshots (-u) without checking Always check the diff first before accepting
Taking snapshots of huge, complex screens Break down into smaller components
Snapshotting things that always change (e.g., timestamps, random IDs) Avoid snapshotting unstable output

Conclusion

Snapshot testing is a simple but powerful tool to catch unexpected UI changes in your React Native app.

With just a few lines of code, you can:

  • Capture your component's structure
  • Be alerted when something changes
  • Review and update your app's design with confidence

Remember:

  • Snapshots are helpers, not absolute proofs.
  • Always review snapshot changes carefully.
  • Start small and practice often!

Quick Recap

You learned Key Point
What snapshot testing is Taking a "photo" of your component's structure
How to set it up Jest + react-test-renderer
How to write a snapshot test expect(tree).toMatchSnapshot()
How to handle changes Review, then npm test -- -u if intentional
Best practices Keep components small, review snapshots

Top comments (0)