// Tutorial //

React Snapshot Testing

Published on May 31, 2017
Default avatar
By Matthew Garcia
Developer and author at DigitalOcean.
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.

react-test-renderer

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 (
    <div>
      <h1>{name}</h1>
      <button onClick={onClickCallback}>Page</button>
    </div>
  );
}

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.
    .toJSON();
  // And compare it to the snapshot.
  expect(tree).toMatchSnapshot();
});

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`] = `
<div>
  <h1>
    John
  </h1>
  <button
    onClick={[Function]}
  >
    Page
  </button>
</div>
`;

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 (
    <div>
      <h1>{name}</h1>
      <button onClick={onClickCallback}>Page</button>
    </div>
  );
}

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

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!