Support for React 17

[layershifter]

An RC for React 17 was released: https://reactjs.org/blog/2020/08/10/react-v17-rc.html

And it does not work with React 17, oops:

Working on an isolated repro ✍️

[layershifter]

A CodeSandbox is ready: https://codesandbox.io/s/cranky-euclid-4qr9z It's enough to use mount(<div />) to repro it, see index.test.js.

[ljharb]

I would never expect enzyme to "just work" with a new major version of React out of the box :-) React breaks things in minors often enough as it is.

First, I have to create an adapter for React 17, and then we'll be able to look at the test failures and go from there.

[layershifter]

@ljharb I started #2430 as I would like to run tests on React 17 ASAP 😺 Appreciate your eyes on it

[ljharb]

Thanks, but that isn't going to speed anything up. enzyme won't be guaranteed to work on React 17 until it's fully released, not a preview.

[wojtekmaj]

I think no one expects everything to work right from the start, but it would be nice to just have the adapter preview so we can find bugs early :)

[ljharb]

That is certainly my hope and plan, just not something i can commit to, since the react team hasn’t coordinated with me prior to releases in years.

[gaearon]

It’s fair we haven’t reached out before this particular RC since we generally view an RC as a “reachout” to the whole community. But I believe I did file https://github.com/enzymejs/enzyme/issues/2358 (16.14 compatibility). Our plans for 16.14 changed and that release turned into 17 but I’d expect the naming change described in that issue to be the primary one you’d need to address. (Although I could totally be missing something!) Sorry for the frustration.

[ljharb]

@gaearon fair point that there's been nonzero efforts, primarily from you personally, which I appreciate. Thanks for pointing me to that issue; I'll incorporate that into the update.

[wojtekmaj]

For those impatient ones (myself included), I published @wojtekmaj/enzyme-adapter-react-17 package. It's exactly like enzyme-adapter-react-16, just the necessary bits replaced.

Use it like any other adapter, so:

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

enzyme.configure({ adapter: new Adapter() });

I tested it on a semi large repository (2000 tests) with no failures, so it should be good enough to use, if the only thing blocking you was a broken adapter.

~I will deprecate the package once an official adapter is released.~ lol

Enjoy!

[trigunam]

For those very impatient ones (myself included), I published @wojtekmaj/enzyme-adapter-react-17 package. It's exactly like enzyme-adapter-react-16, just with one property name replaced.

Use it like any other adapter, so:

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

enzyme.configure({ adapter: new Adapter() });

I tested it on a semi large repository (2000 tests) with no failures, so it should be good enough to test things out, if the only thing blocking you was a broken adapter.

I will deprecate the package once an official adapter is released.

Enjoy!

Used this with no luck. Still get the React not defined errors.

[ljharb]

@trigunam according to react's latest blog post, you need both react 17 and custom babel configuration to be able to avoid importing react. This has nothing whatsoever to do with enzyme.

[hengkx]

react 17 has been released.

[ljharb]

Indeed it has, thanks. I'm still working on getting the adapter set up and passing tests.

[egor-xyz]

Any updates or suggestions on how to use enzyme with React 17? @wojtekmaj/enzyme-adapter-react-17 didn't help with react 17 with TypeScript.

[ljharb]

@egor-xyz at the moment, you can't yet. when this is closed, i'll have published an official adapter for react 17 that passes all of our existing tests.

[tmarshall]

fwiw i had some issues w/ @wojtekmaj/enzyme-adapter-react-17 & TS. Added [email protected] and it resolved the issue

[palerdot]

FYI, React 17 is released and out of RC - https://reactjs.org/blog/2020/10/20/react-v17.html

It would be better if we get an official React 17 adapter.

[carloscuesta]

Hey @palerdot you can always submit a PR to create the adapter! The code is Open Source 😊

[ljharb]

@palerdot yes, i'm quite aware - see https://github.com/enzymejs/enzyme/issues/2429#issuecomment-713251132.

[gabrieledarrigo]

Ciao guys, any news on this, please? ps: there's a way we can help?

[sanbornhilland]

Indeed it has, thanks. I'm still working on getting the adapter set up and passing tests.

At the moment I believe this is blocking people from moving to React 17. I also believe that I and others would be willing to help move this along but it sounds like you were some way to already having this finished. If that's the case but it's not a priority issue for you at the moment I'm wondering if you'd be willing to share the work you have done and we could help push this over the finish line.

[ljharb]

@sanbornhilland it's not that it's not a priority, it's that i have many priorities, of which this is one (i maintain about 300 packages, and have both a family and a day job).

Help is welcome; you can see the current progress in #2430 (which I've just freshly rebased). Please (anyone) feel free to comment there with a link to a branch/commit (no additional PRs, please) and I'll be happy to pull in the changes.

[agustif]

For anyone who lands here looking to make Enzyme + React 17

I found this alternative npm package on google and it worked for me to use Enzyme with React 17...

https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17

import { configure } from 'enzyme'
import ReactSeventeenAdapter from '@wojtekmaj/enzyme-adapter-react-17'

configure({ adapter: new ReactSeventeenAdapter() })

import React from 'react'
import Index from '../pages/index'

import EnzymeToJson from 'enzyme-to-json'
import { mount } from 'enzyme'

it('renders homepage unchanged', () => {
  const subject = mount(<Index />)
  expect(EnzymeToJson(subject)).toMatchSnapshot()
})

Btw the username rang a bell and indeed @wojtekmaj is the creator of the awesome react-pdf library too!! So thank you Wojciech

[sanbornhilland]

For anyone who lands here looking to make Enzyme + React 17

I found this alternative npm package on google and it worked for me to use Enzyme with React 17...

npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17

import { configure } from 'enzyme'
import ReactSeventeenAdapter from '@wojtekmaj/enzyme-adapter-react-17'

configure({ adapter: new ReactSeventeenAdapter() })

import React from 'react'
import Index from '../pages/index'

import EnzymeToJson from 'enzyme-to-json'
import { mount } from 'enzyme'

it('renders homepage unchanged', () => {
  const subject = mount(<Index />)
  expect(EnzymeToJson(subject)).toMatchSnapshot()
})

Btw the username rang a bell and indeed @wojtekmaj is the creator of the awesome react-pdf library too!! So thank you Wojciech

This is discussed earlier in this thread and it's worth pointing out that this package is intended as a stop-gap until official support is released and will be deprecated at that time.

[srinu6]

For those impatient ones (myself included), I published @wojtekmaj/enzyme-adapter-react-17 package. It's exactly like enzyme-adapter-react-16, just the necessary bits replaced.

Use it like any other adapter, so:

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

enzyme.configure({ adapter: new Adapter() });

I tested it on a semi large repository (2000 tests) with no failures, so it should be good enough to use, if the only thing blocking you was a broken adapter.

I will deprecate the package once an official adapter is released.

Enjoy!

Hey @wojtekmaj , using this one but I am getting an error!

TypeError: init is not a function

  82 |        }
  83 |       })
> 84 |        const wrapper = mount(
     |                        ^
  85 |        <Provider store={store}>
  86 |         <ContactDetails
  87 |           route={route}

  at mountLazyComponent (node_modules/react-dom/cjs/react-dom.development.js:17662:19)
  at apply (node_modules/react-dom/cjs/react-dom.development.js:19055:16)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
  at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:316:27)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:267:3)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:214:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:144:23)
  at Object.apply (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
  at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
  at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
  at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
  at fn (node_modules/react-dom/cjs/react-dom.development.js:26021:7)
  at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
  at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
  at Object.ReactDOM [as render] (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
  at getLazyFiber (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/detectFiberTags.js:38:3)
  at detectFiberTags (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/detectFiberTags.js:108:9)
  at ReactSeventeenAdapter.createMountRenderer (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:433:19)
  at ReactSeventeenAdapter.adapter [as createRenderer] (node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:788:46)
  at new ReactWrapper (node_modules/enzyme/src/ReactWrapper.js:113:24)
  at mount (node_modules/enzyme/src/mount.js:10:10)
  at Object.<anonymous> (__tests__/details-test.js:84:24)

[kvskranthikumar]

Any update to have support for React 17, it's been a few months and nothing on this ticket.

[k2snowman69]

If anything (and since it's been a few months), can we get @wojtekmaj/enzyme-adapter-react-17 migrated as an official enzyme-adapter-react-17 package and then whenever the "true" fixes come in just major version it? Or if there are grievous concerns with the implementation beta tag it for now so people know it might be unstable?

[ljharb]

@k2snowman69 an "official" package would need to pass all of enzyme's tests, which that one surely does not.

#2430 is nearly complete; some stack trace fixes are needed before it's ready. However, I'll plan on publishing a prerelease version soon, even without those, so there's something official available.

[k2snowman69]

@ljharb it's been 20 days now, anyway we can get an ETA on that pre-release?

[ljharb]

@k2snowman69 turns out there were a few more failing tests than just stack traces, and also tests are broke on master right now due to a bug in npm 7, that will be fixed soon.