Never use Enzyme to test React Native apps
Enzyme emerged alongside React as one of the most popular React testing libraries. It provides a powerful API for querying the React DOM and for interacting with components. It’s only natural that React Native developers would reach for Enzyme as a testing tool for their apps.
Historically, testing React Native apps with Enzyme has been totally doable. There’s a section in the official Enzyme docs that explains how to get up and running with React Native. Times are changing, though, and the days of using Enzyme as a viable tool for React Native testing are drawing to an end. It’s time to start looking for an alternative (hint: React Native Testing Library). Here are the reasons why.
Enzyme seems unlikely to support React versions past 16
Due to the nature of how Enzyme interacts with React, it’s necessary to install an Enzyme adapter alongside the main Enzyme library for whichever major version of React you’re using.
At the time of writing (April 2022), the latest version of React Native is 0.68, which supports React 17. React 18 is released but isn’t compatible with React Native just yet.
The latest official Enzyme adapter is enzyme-adapter-react-16, which, as you may have guessed, makes Enzyme compatible with React 16 😱
What gives? The changes to React seem to be outpacing the Enzyme maintainers’ ability to keep up, and no React 17 (or React 18, for that matter) adapter seems to be coming any time soon.
However, there’s still hope for developers needing to use Enzyme with React 17. Once it became clear that Enzyme may not get an official adapter for React 17, a developer by the name of Wojciech Maj released his own unofficial adapter for React 17. As he describes in his post Enzyme is Dead. Now what?, his adapter “has become de facto the default adapter for React 17, with 16 million downloads so far.”
I’ve used Maj’s adapter with React Native, and it works, but it’s obviously no long term solution. Maj himself has no intention of writing an adapter for React 18, and unless something changes dramatically, we’re unlikely to ever see an official Enzyme adapter for 18 and subsequent React versions. So write Enzyme tests to your heart’s content, just know that those will all likely break beyond repair if you upgrade your app to use React 18.
Some of Enzyme’s most powerful features are unavailable for function components
If the previous point wasn’t enough to convince you not to use Enzyme to test React Native, there are more reasons to be leery of doing so.
In Enzyme’s heyday, it was very common to see tests that followed the pattern demonstrated here:
Wrappers created from class components would include an instance() method, which would give your tests direct access to the class component’s methods. You’d often see tests invoke class methods and then test whether the desired side effect took place.
Enzyme wrappers created from function components don’t have instance()s, though, so this type of test is impossible. Depending on who you ask, that’s probably actually a good thing, because testing class methods like that means you’re testing implementation details, which it may be best to avoid. Just be aware that Enzyme loses a bit of its flexibility when you use it to test modern function components.
Using Enzyme with React Native can feel clunky
Because Enzyme was created for React, a web technology, it depends on traditional browser DOM to work, which React Native lacks. To satisfy this requirement, most folks reach for JSDOM. This works, but getting it set up can be a bit of a pain and results in a setupTests file that looks like this:
Compare this rigmarole of setup to what it takes to get React Native Testing Library up and running:
yarn add --dev react-native-testing-library
Speaking of RN Testing Library, let’s compare two versions of the same test, one written with Enzyme and the other with RNTL. We’ll test this simple component:
Here’s the test written with Enzyme:
And here is the same test written with React Native Testing Library
Obviously, the second example is much easier to read (and to write) than the first. I realize that helper functions would do wonders to make the Enzyme tests more readable, but I just wanted to demonstrate what these two libraries look like out of the box.
Closing thoughts
You may fairly accuse me of comparing apples and oranges with the above examples. Enzyme and React Native Testing Library are fundamentally different libraries, and Enzyme was never intended to be used with React Native. It’s actually kind of amazing that it ever worked at all.
The overall point I want to make is that there’s probably no reason to be writing new React Native tests with Enzyme in 2022 and beyond. React Native Testing Library gives us an intuitive API designed specifically for React Native that makes it easy for us to write tests according to modern best practices. And with Enzyme support for future versions of React looking unlikely, it’s a good time to start migrating your tests to another framework.
I welcome any and all corrections and connections on Twitter @dev_twest!
