As software developers, we frequently encounter situations where we struggle to determine which library is the most appropriate for our needs and to understand the differences between various options.
When it comes to component-level testing in React JS, developers have several testing libraries and tools, including Enzyme, Jest, and the Testing Library. Component testing is an essential part of modern web development, especially for complex web applications built on top of React.
This detailed blog on migrating from Enzyme to React Testing Library will explain how to migrate your test automation suite to React Testing Library and understand the pros and cons of doing so.
We know that, under the hood, React is a component-based UI library, with two types of components: functional and class components. Functional components are like functions in JavaScript, and class components are like classes in JavaScript. One needs to have a basic understanding of JavaScript concepts before learning React.
Most probably, you will be using the functional component, and the core React developers also encourage you to write functional components. Each component will be part of the layout logic of your application, and together they make your application complete.
If your component is just some simple UI, you don't need that many functionality checks and can conduct various tests like component testing, unit testing, etc. However, for more complex components that contain states or rely on certain behaviors, it's important to perform thorough unit testing in React to ensure that they're working as expected.
Component testing is the type of testing where you focus on individual units of code, in this case, components. It can be a class or functional component, and the main intention of doing component testing is to ensure that each component is working as expected.
Most web applications have some type of input form to collect information from the user, and it is important to validate that the implementation is working as expected, or else you may lose a potential customer.
Component testing helps you ensure that each and every function that you have implemented is working correctly and reliably, which leads to a better user experience.
While Enzyme and React Testing Library are both options for component testing in React, React Testing Library is often considered a better choice for several reasons, and even the official React team recommends using React Testing Library.
Enzyme is an open-source JavaScript library that makes React testing easier. It has over 2 million weekly downloads on npmjs.com
With Enzyme 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.
Enzyme has had only one release in the last three years, and it does not appear that they intend to continue development. As developers, we know that the field is always changing, and Enzyme doesn't seem to be able to offer the best testing features for modern web development, and it doesn't look like that will change any time soon.
Although an official Enzyme adapter for React 17 was never released, the creator of Enzyme published a temporary adapter that has become the de facto default adapter with 16 million downloads. However, this has only delayed the inevitable death of Enzyme and given developers a false sense of safety.
By the end of 2021, Wojciech Maj, the project's creator, had officially announced that he had stopped working on it and that no further updates could be expected.
He also mentioned using the React Testing Library, which is a fairly new but officially accepted testing library for React.
React Testing Library is another open-source JavaScript library that helps with react testing, and it has over 7 million weekly downloads on npmjs.com. It has around 17.5K stars on Github, and around 150+ developers are currently working on the project.
According to the state of JavaScript survey 2022, React Testing Library ranks 2nd in the retention metric and is steadily climbing the ladder.
The react-testing-library package family can help you test your UI components in a way that prioritizes the user experience for your website or app. The library’s guiding principle is “The more your tests resemble the way your software is used, the more confidence they can give you."
The main problem React developers face when writing tests is wanting to write maintainable tests that give them high confidence that their components are working for their users. That is, with the React testing library, developers can concentrate on the functionality of the component rather than the actual implementation.
To smoothly switch from Enzyme to React Testing Library, it's best to do it step by step. This means using both libraries at the same time in your application and gradually converting your Enzyme tests to React Testing Library tests one by one. This approach lets you migrate even large and complex applications without disrupting other businesses, as the work can be done collaboratively and over time.
Migrating from Enzyme to React Testing Library (RTL) can be a straightforward process if you follow a few best practices. But before diving into these practices, let's see what an actual migration of code looks like by comparing Enzyme and React Testing Library
Here we have a React JS component with four text input elements, and throughout this blog, we will use this example.
The output will be like this
If you want to see the full code here is the source code
For this example, we will have three test cases here:
Here is an example of how the above test cases could be written using Enzyme:
Let's now convert it to the React Testing Library:
This second test case again uses the render method to load the component. It then uses the screen object to get the input fields by their label text using the getByLabelText query.
The test then uses the fireEvent.change function to simulate a change event on each input field. This updates the state of the component with the new values. Finally, it uses the toHaveValue matcher from the @testing-library/jest-dom package to check if the values of the input fields have been updated correctly.
The third test case will be updated with the following snippet of code:
This test case checks if the onSubmit function is called with the form data when the submit button is clicked. It creates a mock function mockOnSubmit and passes it as a prop to the Form component.
It then gets the input fields and submit button using the screen object from @testing-library/react, simulates changes to the input fields and a click event on the submit button using fireEvent from the same library, and asserts that mockOnSubmit was called with the expected data.
If you have gone through the code, you can see that, unlike Enzyme, React Testing Library does not provide direct access to the component state or props. Instead, it encourages you to test your component from the user's perspective, by interacting with the rendered output and making assertions about what is displayed.
Here are the differences found in our test suite:
Keep in mind that this is just a general overview, and depending on your needs as you work on code migration, you might want to add some additional test cases.
As it is visible in this example, Enzyme’s shallow renderer does not render sub-components, whereas React Testing Library’s render method renders the component and all sub-components just like Enzyme’s mount method.
In the React Testing Library, you don't always need to assign the render result to a variable; that is, it doesn’t always need a wrapper. You can simply access the rendered output by calling functions on the screen object.
The other good thing to know is that React Testing Library automatically cleans up the environment after each test, so you don't need to call cleanup in an afterEach or beforeEach function.
One of the things people quickly learn to love about React Testing Library is how it encourages you to write more accessible applications (because if they're not accessible, then it's harder to test).
However, starting from scratch is recommended, even by the creator of Enzyme. Because React Testing Library is not a drop-in replacement for Enzyme, but rather an alternative to it.
You can install the React Testing Library using the following command, you can use npm or yarn or pnpm, whichever one you prefer:
You can import the library just like any library by running the following command
Here, the render function renders a component just like React, and the screen function is a utility for finding elements the same way the user does.
You can render the component almost in the same way as Enzyme, the main difference is we use the wrapper in Enzyme and Screen in React Testing Library.
In Enzyme:
In React Testing Library:
In the React Testing Library, you can access the result of the rendered component without assigning it to a variable by using the "screen" object's functions.
Let’s now look at how you will achieve some tests in Enzyme and see how it is done using React Testing Library.
The React Testing Library focuses on testing accessibility through user interactions, including focus. The enzyme also supports checking the focused element and simulating events.
In Enzyme:
In React Testing Library:
Enzyme gives you different ways to choose which elements to select, such as by using CSS selectors. React Testing Library on the other hand uses more semantic queries, such as getByRole, getByText, and getByLabelText, which simulate how users interact with the application
In Enzyme:
In React Testing Library:
Enzyme provides methods for updating the state and props of a component, including setState, setProps, and setContext, whereas the React Testing Library does not provide methods for directly updating state or props. Instead, you should simulate user events, such as clicking a button or entering text into an input field, to trigger state and prop changes.
In Enzyme:
In React Testing Library:
Enzyme provides methods for testing component lifecycle methods, including componentDidMount, componentDidUpdate, and componentWillUnmount.
React Testing Library does not provide methods for directly testing lifecycle methods. You should instead test the effects of lifecycle methods by simulating user interactions and watching how the UI changes as a result.
In Enzyme:
In React Testing Library:
If you're working on a React project and need a powerful debugging tool, you have a few options to choose from. Enzyme has a debug method that lets you print the component tree to the console. This can help you find problems with your tests.
React Testing Library also has a debug method, and apart from that, it also provides a screen object that you can use to interact with the rendered components directly in the console.
In Enzyme:
In React Testing Library:
One of the main reasons why the React Testing Library is gaining popularity in the testing community is the simplicity it provides.
According to us, the following reasons contribute to its wide acceptance:
Even though the React Testing Library (RTL) is a strong testing library with lots of advantages, there are still some difficulties that developers might run into. Here are a few challenges that developers may face:
During the process of migrating your code from Enzyme to the React Testing Library, you may encounter errors that could halt your progress. To overcome this challenge, you can use Zipy.ai as your error monitoring and debugging tool. Zipy allows you to log real-time error messages, providing you with a better debugging experience and helping you to overcome any obstacles encountered during the migration process.
Congratulations on reaching this far! You’re a fantastic reader!
There is no one "best" tool for all situations. Each tool has its own strengths and weaknesses and can be better suited for certain tasks than others.
But from an up-to-date point of view, Enzyme is outdated, and we should consider migrating to more popular libraries like React Testing Library. In this detailed blog, we have covered all the aspects that you need to know while migrating your test suite from Enzyme to the React Testing Library.
Now that you know how to migrate to the React Testing Library, you can get started.
Happy Testing!
Call to Action
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
Call to Action
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
Call to Action
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
Call to Action
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
Call to Action
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore for your app, you can sign up or book a demo.