Does Enzyme support React version 18?

Question

Recently, React 18 has released and I have upgraded my project to 18. I noticed that all of my unit tests that were written by Jest and Enzyme are failing. I have used mount from Enzyme as a wrapper of my component and noticed the following error:

TypeError: Cannot read property 'child' of undefined

I also tried to check if it has support for React 18 yet but couldn't find any suitable link about that.

Does anybody have any thoughts about that? Or are there any workarounds that can be followed in that case?

Racket

I had some luck using render from react testing library. It gives me the Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17 warning / error, but the tests still pass. Its not ideal, but it works for now while the community scrambles to catch up with react 18 – Giannini

Did Enzyme ever even get up to date with React 17, rather than using a third-party adapter? Really there's no reason to use it at this point. – Ropable

Take a look at this thread https://mcmap.net/q/386352/-referenceerror-textencoder-is-not-defined-when-running-react-scripts-test-env-jsdom – Arsenical

Answer 1

Enzyme is dead. (There will be no React 18 support)

you can read the article below for more info but in short:

the API changes in React 18 meant that releasing a React 18 Enzyme adapter will not be possible

---

A bit of personal advice

While Migrate from Enzyme support article is available, I suggest you to just start fresh, forgetting that Enzyme has ever existed. RTL is by no means an Enzyme drop-in replacement, so having a completely fresh mindset will help you getting the most of it.

---

What should I do?

The answer is, as always, it depends. You don't have to upgrade React, after all.

Here's what I would do:

1. Start familiarizing yourself with React Testing Library(RTL), an officially recommended library for React components.
2. Make a rule to write new tests using RTL only.
3. Consider making a rule to rewrite tests to RTL whenever you need to touch them and/or the component they are testing.
4. In your designated time for repaying technical debt (you have designated time for repaying technical debt, right? …right?), rewrite your remaining Enzyme-based tests to RTL.
5. Clean up your repo from Enzyme-specific bits
6. When you're ready, upgrade to React 18.

---

Link of complete article by Wojciech Maj, maintainer of @wojtekmaj/enzyme-adapter-react-17, React-PDF, React-Calendar, and React-Date-Picker: https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl

Mientao

While I have no love for enzyme, there are a LOT of tests that already exist using enzyme in my company's apps. I wish there was a drop-in migration tool of some sort. – Ermaermanno

Such a drop-in tool probably can't exist because Enzyme has a completely different testing philosophy than RTL. Things that Enzyme makes easy, like testing implementation details, are far more difficult in RTL, and even if converted, would be non-idiomatic RTL. – Intrude

@Ermaermanno not sure if this may still be useful to you but I had the same problem and solved it with a babel plugin that allowed me to incrementally adopt react-18 in tests npmjs.com/package/babel-plugin-jest-enzyme-react-16-patch – Boyer

Answer 2

The maintainer of @wojtekmaj/enzyme-adapter-react-17 (unofficial adapter for React 17) warns that enzyme is dead. The support of React 18 would require a complete rewrite of it. Here is the link https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl

He suggests to either move to RTL or stick with React 16-17

Barfly

Answer 3

React 18 was released in March 2022. Enzyme's last commit is from September 2021. It seems fair to assume that Enzyme has not yet been updated to guarantee compatibility with React 18.

Mundane

hum looks like then we still need rely on the earlier react version. Are there any ways we can use multiple version of react, so that the enzyme tests also pass with the required version? – Racket

Answer 4

There currently is no official React 18 support: https://github.com/enzymejs/enzyme/issues/2524

However you can try to run your tests with a separate config and with react 17: https://github.com/enzymejs/enzyme/issues/2524#issuecomment-1116246491

Whitefaced

Answer 5

Not official, but worth trying as a short-term solution until you can migrate to something like RTL:

https://www.npmjs.com/package/@cfaester/enzyme-adapter-react-18

Decry

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Burnsed