# Mastering Jest: Day 5 — Snapshot Testing

#### Introduction

Photo by [Lewis Kang'ethe Ngugi](https://unsplash.com/@ngeshlew?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

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 <button\>{label}</button\>;  
}  
  
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(<Button label\="Click Me" />).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 <button className\="primary"\>{label}</button\>;  
}  
  
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 (  
    <div\>  
      <h1\>Welcome</h1\>  
      <Button label\="Click Me" />  
    </div\>  
  );  
}  
  
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(<App />).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!