Testing React Components and Apps with Enzyme
Tags: react, testing, tdd, enzyme
Published: 2020-12-29 02:51:00

---
title: Testing React Components and Apps with Enzyme
published: true
date: 2020-11-10 05:14:48 UTC
tags: React,Testing,TDD,enzyme
canonical_url: https://lo-victoria.com/testing-react-components-and-apps-with-enzyme
---

Testing front-end applications can be a pain and time-consuming to write. In this article, let's discuss Enzyme and how we can use it to make testing UI much easier.

## First, What's Enzyme?

Enzyme is a JavaScript testing utility for React. It makes testing React components easy by asserting, manipulating, and traversing every components' output. Currently, it is open sourced and maintained by AirBnB.

![enzyme](https://cdn.hashnode.com/res/hashnode/image/upload/v1601698225471/gr5Os7Nhh.png)

## Why Enzyme?
In terms of testing, you've probably heard of Mocha and Chai. This JavaScript test framework and assertion library are often used cohesively to write unit and functional tests.

But what about testing React components? Enzyme is the solution for the following reasons:

- Intuitive and flexible API
- Compatible with major and common test runners
- Supports shallow rendering, DOM rendering and static rendered markup

![renders](https://dzone.com/storage/temp/7506322-enzyme-structure.png)

## Enzyme Implementation
Now let's learn how we can use Enzyme with Jest, a test runner in React, to write tests.

### Step 1: Install Enzyme
First we install the package:
```
npm install enzyme enzyme-adapter-react-16
```

### Step 2: setupTests.js
When you create a new React app, there should be a `setupTests.js` file initialized by default. 

Add the following code in that file to import Enzyme:
```
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

```

### Step 3: App.test.js
In this example, let's test our `App.js` file. Jest, our test runner, will run test files automatically if the file is:

1. Any .js file in a folder named __tests__
2. Any .js file with a name like [name].spec.js
3. Any .js file with a name like [name].test.js

So let's have an `App.test.js` file to test our `App.js`. In that file, we'll write some simple test like so:

```
import React from "react";
import App from "./App";
import renderer from "react-test-renderer";
import { shallow } from "enzyme";

it("renders without crashing", () => {
  shallow(<App />);
});

it("renders correctly", () => {
  const rendered = renderer.create(<App />);
  expect(rendered.toJSON()).toMatchSnapshot();
});
```
In our first test, we use shallow rendering to isolate an individual component such as `<App/>` and make sure that it renders.

Our next test is a snapshot test to test if the UI renders correctly. According to Jest documentation,
> A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. 

### Run Tests
With these 2 simple example tests, let's run them with:
```
npm test
```
If all tests passed, the terminal should show:

![tests](https://cdn.hashnode.com/res/hashnode/image/upload/v1601670328433/Y64ed1utK.png)

## Automating your tests
So now we know how to write simple UI tests with Enzyme. For more details, visit their [documentation](https://enzymejs.github.io/enzyme/).

It's always good to keep your test automated instead of manually running `npm test` every time. [Buddy CI/CD](https://buddy.works/?utm_source=hashnode&utm_medium=referral&utm_campaign=content_victoria_lo&utm_content=react_enzyme) is a tool I use to automate tests easily, and it works well for React apps.

### Step 1: Add a Pipeline
To get started, simply create an account at [buddy.works](https://buddy.works/?utm_source=hashnode&utm_medium=referral&utm_campaign=content_victoria_lo&utm_content=react_enzyme), and add your project by choosing the git provider you use.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604431192875/79b3Xr_H3.png)

Then, add a pipeline in which we can automate our tests in our React app. Ensure that 'Trigger Mode' is set to **On Push** and the branch as `master` so that our test will automatically run every time we made changes to our project.

![pipeline](https://cdn.hashnode.com/res/hashnode/image/upload/v1601688238676/uVJGtMCQX.png)

### Step 2: Add a Node action
Since we're using the command `npm test` to run our test, we can add a **Node** action to our pipeline.

In our action, we run the commands to install our package and run our test:
```
npm install
npm test
```
![node](https://cdn.hashnode.com/res/hashnode/image/upload/v1601681676813/We9EHYIZY.png)

### Step 3: Add Notifications
Finally, we can send an Email notification so that we know when the test has finished running.

![notification](https://cdn.hashnode.com/res/hashnode/image/upload/v1601683674762/yKSxIhbTl.png)

### Run Pipeline!
If we run our pipeline, our tests will be automated and run every time we pushed to our `master` branch.

![pipeline](https://cdn.hashnode.com/res/hashnode/image/upload/v1601688173134/v08v_Q1eY.png)

## Conclusion
Enzyme makes testing components and UI easy for React Apps. With writing tests, automating them can help detect errors early and save development time. [Buddy CI/CD](https://buddy.works/?utm_source=hashnode&utm_medium=referral&utm_campaign=content_victoria_lo&utm_content=react_enzyme) is a great tool for achieving that automation.

For more resources on how to create delivery pipelines for React apps with Buddy, please check out the following:
- [Deploying React Apps Webinar by Buddy](https://youtu.be/mmexLa-o6E8)
- [Build and Deploy React Apps with no Downtime](https://buddy.works/guides/reactjs-zero-downtime-deployment?utm_source=hashnode&utm_medium=referral&utm_campaign=content_victoria_lo&utm_content=react_enzyme)

Thanks for reading! Cheers!