What is the better testing library for React, Enzyme (from Airbnb) VS React testing library (from Kent C. Dodds)?

#javascript #webdev #programming #react

I wish, if I did not ignore this earlier, if I took it seriously, then I was not confused to suggest which library we should use in the React for the project.

A few weeks ago, I was surfing and posted some posts on Linkedin on which react testing library I should use "React testing library or Enzyme library by Airbnb.

I spent a lot of time researching this. I visited so many blogs, did a post on community, and all.

I have received some replies, but still not convinced at all. Then, I did this: I tried both testing libraries.

Here are some things I have found during research and using both of them that can help you too:

Enzyme:

Focuses on unit testing means it tests components prop & states value, not actual user flow.
As it depends on components prop and state for testing, if you perform any changes in the code, then all test cases for that component will break. Still, If user behavior (user flow) is the same, your test cases will not work.
Can perform isolated testing, depends which rendering method you are using. If using shallow rendering, then will render parent component. If using the mount rendering, then it will load parent to child components to test.
As it tests components props & states, finding the bug in code is easy.
You can access components by using CSS selectors for testing.
Enzyme popularity is decreasing day by day (Not even in top 10). To support this statement here is the survey link: Enzyme Trend.
There is no official adapter (it helps the Enzyme distinguish which React version you are using and which necessary files are required to test files for that react version) for React version 17.
As react version 18 beta announced and there are a lot of changes in React API, I don't think version 18 adapter will be possible as changes in API will require a lot of rework for these: Enzyme Adapters, Enzyme itself, enzyme-adapter-utils, and enzyme-adapter-react-helper.
Enzyme depends a lot on React internals, one change in React internal can break the whole Enzyme library.
If you are not planning to migrate to React version 18, using Enzyme with an unofficial adapter will be enough. In case you are planning to upgrade, then consider React testing library.

React testing library:

Popular and comes with React if you install react with npx create-react-app.
Popularity is increasing day by day. Source: Survey by state of js
Recommend by React team for testing. Source: https://reactjs.org/docs/testing.html
It focuses on user flow-based testing means it performs testing as a real user interacting with your app.
It gives you more confidence in your code as it tests the same as real users interacting with your app.
It depends on the user flow, not on the code, which means if you make any changes in the code, not in user behavior (user flow), then your test cases will not break.
As it tests the same as a user interacting with your app, finding the bug in code can become difficult to find.
By default, it has only one type of rendering for testing, "render" same as mount in Enzyme.
Accessing components is not easy like Enzyme, as it is not using CSS selectors instead, it uses other methods such as findBy, and getBy.
If you need to wait for an element to appear/disappear or a promise has to resolve first, then using findBy methods along with await will help you a lot. Super Easy, right? Yes, it is
Performing user events are almost the same as Enzyme. The only difference is that, in Enzyme, the user needs to pass the event name as a string, and for that, you need to visit the documentation to find an event, but in React testing library, you don't need to. Just access the internal method like this "userEvent.click". It is a Timesaver for me.
If you look in Stack Overflow trends, you will see a lot of progress for the react-testing-library, which means if you are stuck somewhere in testing, then there is a huge community to help you. Source: React testing library & Enzyme Trends

My views:

I am using both libraries, personally like both libraries. There are still many companies out there using Enzyme as they are more interested in traditional testing. So might be there are some chances that you need to use Enzyme over react-testing-libraries, but it is upto us to share pros & cons for it.

In the long run, I recommend you to use react-testing-library as it is growing rapidly, can perform testing the same as a user interacting with your app, not going to be deprecated or outdated, and has community support.