Snapshot testing is particularly useful in testing React components. Let’s see how it’s done.
You need to render your React components before you serialize them. Be sure to install react-test-renderer
so you can do so.
Let’s say you have a component that pages a person when you click a button
Your test should look something like
The snapshot goes to the __snapshots__
folder and all subsequent test runs will compare to that. From there you can edit Pager
as you please; so long as the same props give the same result, the snapshot will match. But that’s also a problem.
It’s important to note that, while objects are serializable, functions (and therefore callbacks) are not. If you open up Pager.test.js.snap
, you’ll see that onClickCallback
is being represented as [Function]
.
If Pager
is rewritten so that onClickCallback
does something else, the snapshot will still pass.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!