Mastering Jest: Day 5 — Snapshot Testing

Introduction

Photo by Lewis Kang'ethe Ngugi on Unsplash

Welcome to Day 5 of our Jest journey! Yesterday, we explored the power of mocking functions and modules. Today, we’ll dive into snapshot testing, a powerful feature in Jest that helps you ensure the UI of your application remains consistent over time.

What is Snapshot Testing?

Snapshot testing is a way to track changes in your UI components. It captures the rendered output of a component and compares it to a stored snapshot. If the output changes, Jest will alert you, allowing you to review and approve or deny the changes.

Creating a Snapshot Test

Let’s see how snapshot testing works with a simple React component:

// Button.js
import React from 'react';

function Button({ label }) {
return {label};
}

export default Button;

To create a snapshot test for this component:

// Button.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';

test('renders correctly', () => {
const tree = renderer.create().toJSON();
expect(tree).toMatchSnapshot();
});

When you run this test for the first time, Jest creates a snapshot file that stores the rendered output of the Button component.

Updating Snapshots

If you make changes to the Button component:

// Button.js
import React from 'react';

function Button({ label }) {
return {label};
}

export default Button;

Rerunning the test will cause it to fail because the rendered output no longer matches the stored snapshot. You can update the snapshot by running:

jest --updateSnapshot

This command updates the stored snapshot to match the new output of the Button component.

Best Practices

1. Review Changes: Always review changes in your snapshots to ensure they are intentional.
2. Use Descriptive Test Names: Clear test names help you understand which part of the UI each snapshot corresponds to.
3. Keep Snapshots Small: Avoid capturing large snapshots; focus on smaller, manageable components.

Example with Nested Components

For more complex components with nested children:

// App.js
import React from 'react';
import Button from './Button';

function App() {
return (

Welcome


);
}

export default App;

Snapshot test:

// App.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import App from './App';

test('renders correctly', () => {
const tree = renderer.create().toJSON();
expect(tree).toMatchSnapshot();
});

Conclusion

Snapshot testing is a powerful technique to ensure your UI components stay consistent over time. By integrating snapshot tests into your workflow, you can catch unintended changes and maintain the quality of your application’s UI.

Stay tuned for Day 6, where we’ll explore testing Redux with Jest. Feel free to share your experiences and any questions you have in the comments below!