React 16 Tooling

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 ...