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):