Snapshot tests are a common way to write lightweight component tests. When a snapshot test runs for the first time, it stores its output (e.g. rendered componentâs HTML structure) in a snapshot output file. Every time the snapshot test runs again, another snapshot output file gets created; which is used to diff the output against the old snapshot testâs output file. If the snapshotâs output has changed, the developer accepts or denies the changes. This way, developers keep an overview of their recent changes.
The code snippet shows a React application that implements a counter which can be increased/decreased with a React Hook by using one of two rendered buttons. A straightforward snapshot test for the React component could be implemented the following way:
If one would run the snapshot test, the following snapshot output file would be generated:
Thatâs the most basic approach for snapshot testing in React . The question for this tutorial: What happens if you want to snapshot test a provoked change of your re-rendered component?
For instance, in the case of our React application, one could invoke one of the two buttons to cause a state change which increases the counter which would lead to a re-render of the component. Afterward, a new snapshot test could be used to assert the differences of the rendered output:
After running the snapshot test, we would end up with two snapshot outputs in the same snapshot output file. The following code snippet shows only the second output for the changed/re-rendered component:
Again, thatâs the most basic approach for testing a changed/re-rendered component. However, there are two drawbacks for this minimal approach which can be seen in the previous snapshotâs output:
Letâs implement a better version for snapshot tests to assert differences that can happen after re-renderings caused by user interaction or other side-effects. First, install this neat helper library for asserting a snapshot difference:
Second, setup the helper library by extending your Jest expect method with a new functionality:
And third, make use of the new functionality to create a snapshot for the difference between two component renders:
Now, you get the second output for the re-rendered component in your snapshot output file:
If you compare this snapshotâs output to the previous one, you can see that we got rid of the two mentioned drawbacks. First, we donât render the whole component again, but only the part that has changes in addition to its surrounding environment. Second, the snapshot testâs output doesnât look like a rendered component anymore, but like a diff between two outputs shown with the + and - prefixes. Only by looking at the snapshotâs output file, a developer can tell that 1) the snapshot test was caused by a change of the component and 2) that the rendered output has changed from X to Y.