Jest Snapshot Testing for React Components(An Honest Assessment)
--
What Are We Testing?
Jest snapshot testing is primarily used for testing the rendered output of React components.
The rendered output is ultimately the element(s) that render in the DOM:
For example, here’s a standard React component that renders a title:
Title renders a simple h1 element. A snapshot test would ensure that this component output an h1 given the children input.
The aim is that if we test the rendered output of all our React components in an application, we will have effectively tested what is being shown to a user.
Dynamic Rendered Output
Of course, React is dynamic.
The rendered output can vary based on the input (props):
It can also vary based on a component’s state:
When testing the rendered output, we want to make sure we cover all the dynamic outputs.
What Does It Not Test?
Snapshot tests do not cover the business logic of components.
For example, consider the following component:
