React Testing Library vs Enzyme

There are many React testing libraries on the market, but two of the most popular are React Testing Library (RTL) and Enzyme. Both of them are used for testing react components, and both provide the tools needed for testing some application, but they have two different approaches. Let’s make a summary which one is better for testing ReactJS components.

Enzyme provides access to the state, enabling us to read and set the state and also mock children, which makes tests run faster. With Enzyme we can test the details of implementations of the existing component. On the other hand, React Testing Library promotes the idea that we should communicate with the application just like the users would. So React Testing Library doesn’t give access to the state but it allows us to reproduce actions that the users would do to get to the certain state. Let’s get into details.

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal. (From the official documentation here)

Enzyme was released in 2015 by the Airbnb team and it provides a way to simulate run time of React apps. It’s a JavaScript library for testing React components. It allows you to extract and manipulate the components of your React tree in order to test them. This makes it easier to write comprehensive tests that cover all aspects of your component.

React Testing Library

Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you. (From the official documentation at https://testing-library.com/docs/react-testing-library/intro)

RTL is relatively new, initially released in 2018, but its popularity has been growing steadily since 2020. This library is built on top of the DOM testing library with the addition of APIs that provide for working with the components of React. RTL is not only used with ReactJS components but also with Vue, Angular and React native, so when you have learned it for one type of project you will know it for every other. RTL is replacing the already existing Enzyme and makes testing easier. RTL code is short, simple and it is easier to read, while Enzyme tests require more lines of code.  

Differences in concepts, rendering and operations

There are differences in concepts, rendering and operations. Let`s take a look at each of them.

Difference in concepts:

With Enzyme we are using the state and the props to test certain components. Let’s consider having some component that has a variable or a prop called X and the test is running fine. But when some other developer comes along and changes that “X” variable to a “Y”, the test fails. This scenario won’t occur while testing with RTL. Taking into consideration that we want to test some dropdown component, we will not test what happens to the props or the variables.  However, taking into consideration how some users will interact with it, we will test it using the DOM element.

Difference in rendering:

While using RTL, shallow or deep rendering is not possible because we are using the DOM, but these renderings are possible with Enzyme.
What is shallow rendering? It allows the tester to be sure that he is not maintaining the tests on the basis of the behavior of the children.

Anyway, we can still get full rendering using the DOM with Enzyme, which can be used in cases when we have higher-order components.

Difference in the operation:

Using Enzyme as a testing library, we aren’t constrained to testing only the state, props or internals of the tested component as we can also test the DOM. By comparison, with RTL we are bound to only test according to the DOM as we aren’t able to access the internals of the component.

Setting up:

To start testing your app, you first need to install Enzyme into the project using this command:

npm i --save-dev enzyme enzyme-adapter-react-16

When using Enzyme we need adapters in order to work with React. A nice practice will be to set this adapter into one file and export it so we won’t need to set it in every test file. By comparison, we aren’t bound to use any adapters when testing with RTL.

Setting up adapter:

import Enzyme from 'enzyme';

import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Installing of the RTL should be done by this command:

npm install --save-dev @testing-library/react

Conclusion

We cannot decide which testing library is better as it depends on what needs to be tested in the project. But we aren’t restricted to using only one in the project. We can use either or both depending on the need.