Tutorial

React Snapshot Testing

React

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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.

  • 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>
  );
}
Creative Commons License