React Snapshot Testing

Published on May 31, 2017
Default avatar

By Matthew Garcia

React Snapshot Testing

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Snapshot testing is particularly useful in testing React components. Let’s see how it’s done.


You need to render your React components before you serialize them. Be sure to install react-test-renderer so you can do so.

  1. yarn add --dev react-test-renderer

Creating a Snapshot for a Component

Let’s say you have a component that pages a person when you click a button

// Pager.js
import React from 'react';

export default function Pager({ name }) {
  const onClickCallback = () => alert(`Paging ${name}!`);
  return (
      <button onClick={onClickCallback}>Page</button>

Your test should look something like

// Pager.test.js
import React from 'react';
import renderer from 'react-test-renderer';

import Pager from './Pager';

it('looks okay.', () => {
  const name = 'John';
  // Render the component with the props.
  const tree = renderer.create(<Pager name={name}/>)
  // Convert it to JSON.
  // And compare it to the snapshot.

The snapshot goes to the __snapshots__ folder and all subsequent test runs will compare to that. From there you can edit Pager as you please; so long as the same props give the same result, the snapshot will match. But that’s also a problem.

Snapshots Are Not a Magic Bullet

It’s important to note that, while objects are serializable, functions (and therefore callbacks) are not. If you open up Pager.test.js.snap, you’ll see that onClickCallback is being represented as [Function].

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`properly writes name. 1`] = `

If Pager is rewritten so that onClickCallback does something else, the snapshot will still pass.

export default function Pager({ name }) {
  // Not what you want it to do, but it will still pass.
  const onClickCallback = () => alert(`Paging {name}!`);
  return (
      <button onClick={onClickCallback}>Page</button>

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
Matthew Garcia


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel