Migrating from Enzyme to React Testing Library

Choosing the suitable testing library becomes crucial as your application evolves, and React Testing Library (RTL) has gained popularity for its user-centric testing approach. And if you are using Enzyme and looking for an easy way to migrate from Enzyme to React, this blog is for you. This comprehensive guide will walk you through the migration process.

What is React Testing Library?

React Testing Library is a component integrated into an open-source project named Testing Library. Within the Testing Library project, you'll find numerous beneficial tools and libraries that can be used to write concise and useful tests. Here are a couple of the project's other libraries that you will find helpful.

@testing-library/jest-dom: The jest-dom library offers a collection of custom Jest matchers to enhance Jest's capabilities. Use these matchers to easily maintain your tests while making them more declarative and more straightforward to read.

@testing-library/user-event: user-event strives to replicate authentic browser events as users interact with elements on a webpage. E.g., userEvent.click(checkbox) will change the state of the checkbox.

Why migrate to React?

Enzyme has been a staple for React testing, offering a shallow rendering approach. However, React Testing Library takes a different approach by testing the application from the user's perspective, encouraging more realistic and robust test scenarios.

Benefits of migrating to React Testing Library:

1. User-centric testing: RTL encourages testing components in a way that simulates user interactions, leading to tests that closely resemble how users interact with your application.
2. Less focus on implementation details: React Testing Library discourages testing implementation details, promoting more resilient tests that survive component refactoring.
3. Accessibility testing: RTL provides utilities for testing accessibility, ensuring your application is inclusive and complies with accessibility standards.

Enzyme to React Testing Library migration steps

Adopting an incremental approach is highly recommended for a seamless migration. Run both test libraries concurrently within the same application, gradually transitioning your Enzyme tests to React Testing Library one at a time. This incremental process allows for the migration of even extensive and complex applications without causing disruptions to ongoing business activities. The collaborative nature of this approach enables the work to be distributed over time, ensuring a smooth transition.

Step 1: Installation

Ensure that you install the React Testing Library along with the necessary dependencies.

Step 2: Replace Enzyme Imports

Search and replace Enzyme imports with their React Testing Library counterparts in your test files. The official migration guide provides a comprehensive list of replacements for common Enzyme methods. 

For example, replace Enzyme's shallow with React Testing Library's render:

Step 3: Update Test Logic 

Update your test logic to align with React Testing Library's philosophy. Focus on testing user interactions and behavior rather than component implementation details. 
For instance, replace Enzyme's .text() with React Testing Library's getByText:

Step 4: Adjust Queries

React Testing Library uses queries that align with how users interact with your application. Update your queries accordingly. For example, replace Enzyme's. find with React Testing Library's getBy:

Step 5: Review and Refactor

Take this opportunity to review your tests and refactor them for improved readability and maintainability. Remove any assertions focusing on implementation details, and ensure your tests reflect user interactions and expected behaviors.

Using act() and wrapper.update() 

When testing asynchronous code in Enzyme, you usually need to call act() to run your tests correctly. When using the React Testing Library, you don't need to explicitly call act() because it usually wraps API calls with act() by default.

update() syncs the Enzyme component tree snapshot with the React component tree so you may see wrapper.update() in Enzyme tests. React Testing Library lacks (or doesn't require) a similar method, which is beneficial as it reduces the number of things you need to manage.

Simulate user events 

You can simulate events with the React Testing Library in two ways. You can use the user-event library or fireEvent, which is included in the React Testing Library. user-event is actually built on top of fireEvent (which simply calls dispatchEvent on the given element). 

user-event is generally preferred as it ensures to fire all the events in the correct order for typical user interactions. This gives an actual representation of the way the software is used.

Enzyme to React Testing Library migration example

The React Testing Library (RTL) is often used for testing React components. When migrating from Enzyme to RTL, you'll find differences in how you interact with and test components. One key aspect is using act() to handle asynchronous updates.

Let's consider a simple example where you have a Counter component that increments a count on button click. We'll create a test for this component using Enzyme and RTL, then migrate the test to RTL's act() function.

Enzyme Test (before migration):

RTL Test (after migration):

RTL Test with act() (migration using wrapper.update()):

In the migrated example, we've used RTL's act() function to handle updates and asynchronous behavior. This ensures that tests accurately reflect the component's behavior and lifecycle. The act() function is crucial when dealing with state updates, side effects, and other asynchronous actions in React components. I hope this helps you begin your Enzyme to React Testing Library journey.