32

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?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
saon
  • 591
  • 1
  • 7
  • 19
  • 1
    I had some luck using `render` from [react testing library](https://testing-library.com/docs/react-testing-library/intro/). 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 – Seth Lutske Apr 27 '22 at 14:19
  • 2
    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. – jonrsharpe Apr 27 '22 at 16:47
  • Take a look at this thread https://stackoverflow.com/a/72109612/3764994 – ayxos May 04 '22 at 07:59

5 Answers5

26

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

ARiyou Jahan
  • 622
  • 6
  • 7
  • 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. – craigmiller160 Jan 30 '23 at 21:10
  • 1
    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. – ggorlen Mar 18 '23 at 00:39
21

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

T.P.
  • 291
  • 2
  • 9
10

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.

samuei
  • 1,949
  • 1
  • 10
  • 26
  • 1
    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? – saon Apr 27 '22 at 14:39
3

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

thilo
  • 41
  • 4
0

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

gingur
  • 1
  • 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](/help/how-to-answer). – Community Jul 31 '23 at 19:30