Writing Snapshot Tests For React Components With Jest

2018-06-12 07:17 AM

72

Writing Snapshot Tests For React Components With Jest. In this tutorial, we will be looking at what snapshot tests are and how we can use snapshot testing to ensure our User Interface does not change without the team knowing about it.

To get started, you will need to familiarize yourself with the following

What Is Snapshot Testing?

Unlike strict Test Driven Development where the standard practice is to write failing tests first then write the code to make the tests pass, Snapshot testing takes a different approach.

Table of Contents

What Is Snapshot Testing?

Creating a Simple React Component

Writing Snapshot Tests

Updating Snapshot Tests

Conclusion

To write a snapshot test, you first get your code working, say, a React component, then generate a snapshot of it's expected output given certain data. The snapshot tests are commited alongside the component and everytime the tests are run. Jest will compare the snapshot to the rendered output for the test.

If the test does not pass, it may mean that there were some unexpected changes on the component that you need to fix, or you made some changes to the component and it's about time you updated the snapshot tests.

Snapshot testing is meant to be one of many different testing tools. Therefore, you may still need to write tests for your actions and reducers.

Let's get right into it!

Creating a Simple React Component

We should now have a React app! Let's go ahead and create a component that we can test. The component that we are going to be creating renders the items props it receives as either a list or as a span element depending on the number of items.

Next, let's run the tests. Thanks to Create React App, we do not need to set anything else up to run our tests.

yarn test

When your run the tests for the first time, notice that a new snapshot file is created inside a __snapshots__ directory. Since our test file is named Items.test.js, the snapshot file is appropriately named Items.test.js.snap that looks like this.

Updating Snapshot Tests

To understand why we need snapshot tests, we'll go ahead and update the Items component and re-run the tests. This, for your dev environment, is a simulation of what would happen when someone on your team makes a change to a component and your CI tool runs the tests.

We will add class names to the span and li elements, say, to effect some styling.

That's not good, is it? Jest matched the existing snapshots against the rendered component with the updated changes and failed because there were some additions to our compnent. It then shows a diff of the changes that are introduced to the snapshot tests.

To fix this, for whatever reason, would entirely depend on the changes that were introduced to the snapshot tests.

If the changes are not expected, that's good, you got it well in advance before it was too late. If the changes were expected, update your snapshot tests and everything is green again.

While Jest is in interactive mode, you can update the snapshot tests by simply pressing u with the options provided. alternatively, you can run jest --updateSnapshot or jest -u.

This will update the snapshots to match the updates we made and our tests will effectively pass.

Go ahead and pick into the snapshots folder to see how the snapshot files changed. Here is the updated empty snapshot snippet.

exports[`renders correctly when there is one item 1`] = `
<span
className="item-message"
>
one
</span>
`;

Conclusion

In this tutorial, we have been able to write snapshot tests for a React component. We also updated the component to see the failing tests and eventually update the snapshots to fix the tests.

I hope you can now appreciate how easy it is to iterate and debug your UI changes especially when working as part of a big team.

While we have covered the basics of snapshot tests, there is a lot you could learn on writting better snapshot tests. Do take a look at the Snapshot best practices from the Jest’s documentation to learn more about snapshot testing.