TIL how to perform snapshot testing using Facebook’s React unit testing framework
jest. It is somewhat different than traditional visual regression testing… read on to learn more!
Visual regression testing, also known as screenshot testing, involves taking automated screenshots of views under test, and performing a pixel comparison against a stored screenshot of the view to check for regressions. These tests can be quite brittle, are prone to false negatives, and are difficult to maintain…
Snapshot testing is a response to visual regression testing by Facebook, and was released in July of 2016 with Jest v14.0. Instead of storing image screenshots of your UI and performing a pixel comparison, jest stores a version of the rendered output of the react component under test in a “snapshot file”. These snapshot files are committed to the repository alongside other UI tests, and are used by the testing framework to compare against rendered component output in future test runs.
If nothing changes in the rendered output of a component between test runs, the snapshot test passes. If a change is detected, the test will fail and Jest will show a diff between the expected and actual outputs in the console.
Here is an example of what a snapshot test looks like (taken from the Jest snapshot documentation):
And here is what the corresponding snapshot file looks like:
Additional Things to Note
Snapshot tests are a compliment to traditional unit tests, not a substitute: A robust unit test suite should still be used to verify business logic in your code. Snapshot testing should be used to verify portions of your UI that would otherwise be difficult to test (i.e. the rendered output of React components under certain circumstances).
Snapshot files are small so you can have many different variations of snapshots for a particular component without worrying about your repository growing in size.
Snapshot files are easy to update. If the rendered output of a component was purposefully changed, it is simple to update snapshots with the new expected output. Just run
jest --updateSnapshot and all snapshots will be updated against the latest component versions.
Snapshot testing is not recommended for TDD: i.e. manually creating snapshot files first, then writing code to that “spec”. Snapshot tests are intended to detect if the rendered output of a component has changed, rather than provide a spec to which code should be written.
Snapshot testing seems to be a great way to test otherwise difficult to test portions of the UI (e.g. react components) with the speed and fidelity of unit tests. I’m excited to start incorporating snapshot testing into my projects!