Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Snapshot Tests in React Using Jest

DZone's Guide to

Snapshot Tests in React Using Jest

Love React but hate having to test your applications? We'll show you how to use Jest to make this process a little easier.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Writing tests might not have been the most enjoyable thing for you in the past but we hope that after reading this article, you'll be able to increase your test coverage.

Today we're talking about snapshot tests using Jest. They're easy to write, they're fast, and most importantly, we'll for sure know if something is not right if we use them correctly. These snapshots will warn us about every change we make that affects the rendering: whether we're doing something simple, or more advanced rendering that includes conditions or looping.

Configure Jest

First, you need to setup jest in the project. For that install few packages:

npm install --save-dev jest babel-jest babel-core regenerator-runtime babel-preset-es2015 babel-preset-react 

You don't need to install regenerator-runtime if you use npm 3 or 4 or Yarn.
You'll have to add.babelrc file in project root next:

{
  "presets": ["env", "es2015", "react"]
}

Also, you need to install react-test-renderer package. This package is used to render React components to pure JavaScript objects.

npm i react-test-renderer --save 

If you need some specific configuration for your tests, you can configure Jest using package.json file.

You're now ready to write your first snapshot test!

Writing Snapshot Tests

When writing snapshot tests using Jest, you should basically just follow the next template:

import renderer from 'react-test-renderer';
import Component from '../Component.react';

it('renders correctly', () => {
  const tree = renderer.create(
    <Component 
        prop={propValue}
    />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

You use react-test-renderer to create a component with desired props, transform it to JSON, and then check if it matches a snapshot. Easy, right?

Here's a more concrete example - let's say we have a dummy component called Input, for which we want to write a snapshot test:

function Input({ id, placeholder, label, onChange, value }) {
    return (
        <div>
            <label htmlFor={id} >
                { label }
            </label>
            <input
                id={id}
                placeholder={placeholder}
                onChange={onChange}
                value={value}
            />
        </div>
    )
}

For our Input component, it can look something like this:

import renderer from 'react-test-renderer';
import Input from '../Input.react';

it('renders correctly', () => {
  const tree = renderer.create(
    <Input 
        id={'id'}
        label={'label'}
        placeholder={'Placeholder'}
        onChange={() => {}}
        value={''}
    />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Running Tests

To run the test, you just need to type the jest command in the terminal. An output snapshot file will be created, and, when running the test next time, Jest will compare that output snapshot file to our updated component.

If you make some changes to a component that affects it's rendering, (for example add a new item to the list to be mapped), the test will fail because the new object will be different from the previous one. If changes were intended, you can update snapshot using the command jest --updateSnapshot.

Keep in mind that all of these output snapshot files should be committed alongside the modules they are covering and their tests, as they are part of the test.

Of course, while our snapshot tests cover things like if conditional rendering is working properly, they don't test whether clicking on that link will properly redirect to another page. You will still need to write tests that check if the functionality works as expected, but we'll be covering those in some future article.

Thank you for your time reading!

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
web dev ,react.js ,jest

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}