O'Reilly logo

React 16 Tooling by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

React component snapshots

React components render output. Naturally, you want part of your component unit tests to ensure that the correct output is created. One approach is to render the component to a JS-based DOM, and then to perform individual assertions on the rendered output. This would be a painful test writing experience to say the least.

Snapshot testing allows you to generate a snapshot of rendered component output. Then, each time your test runs, the output is compared to the snapshot. If something looks different, the test fails.

Let's modify the default test for the App component that create-react-app adds for you to make it use snapshot testing. Here's what the original test looked like:

import React from 'react'; import ReactDOM ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required