Oh snap, snapshots! Unit & integration testing with Jest & Enzyme

A screenshot journey

Update Jul 9, 2018 —you should also read the follow-up post which goes into more detail about what to look for in a test.

React Devtools — Inspiration

Using Webpack’s “watch mode” is a great way to develop web apps. As you edit code, the app rebuilds and automatically reloads the page.

Did you know Jest also has a watch mode?

Snapshot-Driven Development

jest --watch

Watch mode lets you develop iteratively using snapshots of your components in different states as a way to confidently refactor and add features.

In watch mode, Jest automatically re-runs your tests when files change. You can inspect changes and update snapshots with one keypress by pressing “u”. Cool!

Let’s walk through a scenario: Adding tests to a simple app boostrapped with create-react-app.

The App component

The first test

Adding a snapshot

Refactoring the header into its own component: updated snapshot

Adding props and condtional logic to the new Header component: snapshot fails

Adding props and condtional logic to the new Header component: updated snapshot

Shallow rendering

To avoid coupling the Header implementation to the App component, we can use Enzyme’s shallow render and Enzyme-To-JSON to snapshot only the top level render tree.

Update July 9, 2018 — this is still pretty brittle with regards to implementation details. I’d recommend skipping to the next part about DOM assertions… and check out react-testing-library which makes them easy.

Switching to a shallow snapshot: snapshot fails

Switching to a shallow snapshot: updated snapshot

Moving beyond snapshots — .find() and Markers

As you add more snapshot tests you may discover that some become brittle, need to be updated to often, or that you want to assert about more specific results than what high-level snapshotting provides.

To make DOM tests more resilient you can use “test markers” (special classes or data tags that are only meaningful to tests). For example, the Header component can be rendered into different states but it might be nice to assert that something specific appears when logged in and something else when logged out. Add a test marker and use Enzyme DOM traversal methods like .find to assert that they appear when expected.

Shallow rendering the Header in different states

Adding test marker tags (data-test="xyz") and .find()

Zoomed in on the marker implementation

At this stage we might consider removing the snapshots altogether since we’ve identified and expected what we care about.

Discussions around the web — when to use snapshots

Adding Jest & Enzyme

yarn add --dev react-test-renderer jest enzyme enzyme-adapter-react-16 jest-enzyme enzyme-to-json

Follow the Enzyme setup instructions for your environment.

Demo App


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store