React Snapshot Testing

Matthew Garcia

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.

yarn add --dev react-test-renderer

✨ Black Friday - 50% off all of Wes Bos' courses

Recommended React and GraphQL course

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,

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>
  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#