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

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.

Snapshot-Driven Development

jest --watch

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.

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.

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

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