ReactJS: Snapshot Testing example with Enzyme

Introduction

Testing is an essential part of the development process as it helps in identifying bugs, ensuring functionality, and maintaining the stability of the application. Snapshot Testing is a popular technique in ReactJS that allows us to capture and compare the rendered output of the component. In this article, we will focus on Snapshot Testing using Enzyme, a testing utility library for React.

Prerequisites

Before we begin, make sure you have Node.js and ReactJS installed on your machine. You should also have a basic understanding of React components and testing concepts.

Setting up the Project

To set up a new React project, you can use the Create React App tool. Open your terminal and run the following commands:

npx create-react-app snapshot-testing-example
cd snapshot-testing-example
npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse the rendered output of components.
enzyme-adapter-react-16 is an adapter for Enzyme that allows it to work with React 16 and above.
enzyme-to-json serializes Enzyme wrappers for snapshot testing.

Creating a Simple React Component

Let’s create a simple React component that we will use for Snapshot Testing. Create a new file named Button.js inside the src directory and add the following code:

import React from 'react';

const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

export default Button;

This component is a simple button that takes an onClick event handler and displays the provided children.

Writing a Snapshot Test

Now, let’s write a snapshot test for our Button component. In the src directory, create a new file named Button.test.js and add the following code:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Button from './Button';

describe('Button component', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<Button onClick={() => {}}>Click me</Button>);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

In this test, we are:

Optimizing Performance in React: Boosting Your Application’s Speed

Importing the necessary dependencies – React, shallow from enzyme, toJson from enzyme-to-json, and our Button component.
Using the describe function to group our tests under the ‘Button component’ category.
Writing a test case using the it function, which describes what the test should achieve.
Creating a shallow wrapper for our Button component and providing an onClick prop.
Expecting the serialized output of the wrapper to match the previously stored snapshot.

Updating and Comparing Snapshots

When you run the test for the first time, a new snapshot file will be created in the __snapshots__ directory. This file contains the serialized representation of the rendered output of the component.

Subsequent runs of the test will compare the newly generated snapshot with the stored one. If the snapshots match, the test will pass. If there are any differences, the test will throw an error, indicating that the component’s UI has changed unintentionally.

To update the snapshots, you can use the --updateSnapshot flag with the test command:

npm test -- --updateSnapshot

Conclusion

Snapshot Testing with Enzyme provides an efficient way to ensure the stability of our React components. By capturing and comparing snapshots, we can easily detect any unintended changes to the UI during development.

In this article, we learned how to set up a project for Snapshot Testing, create a simple React component, write a snapshot test using Enzyme, and update and compare snapshots. I hope this example helps you get started with Snapshot Testing in ReactJS.