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.
- yarn add --dev react-test-renderer
Let’s say you have a component that pages a person when you click a button
// Pager.js
import React from 'react';
export default function Pager({ name }) {
const onClickCallback = () => alert(`Paging ${name}!`);
return (
<div>
<h1>{name}</h1>
<button onClick={onClickCallback}>Page</button>
</div>
);
}
Your test should look something like
// Pager.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Pager from './Pager';
it('looks okay.', () => {
const name = 'John';
// Render the component with the props.
const tree = renderer.create(<Pager name={name}/>)
// Convert it to JSON.
.toJSON();
// And compare it to the snapshot.
expect(tree).toMatchSnapshot();
});
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]
.
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`properly writes name. 1`] = `
<div>
<h1>
John
</h1>
<button
onClick={[Function]}
>
Page
</button>
</div>
`;
If Pager
is rewritten so that onClickCallback
does something else, the snapshot will still pass.
export default function Pager({ name }) {
// Not what you want it to do, but it will still pass.
const onClickCallback = () => alert(`Paging {name}!`);
return (
<div>
<h1>{name}</h1>
<button onClick={onClickCallback}>Page</button>
</div>
);
}
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.