search

enzymejs / enzyme

JavaScript Testing utilities for React
https://enzymejs.github.io/enzyme/
MIT License
19.95k stars 2.01k forks source link

Support for React 17 #2429

Open layershifter opened 4 years ago

layershifter commented 4 years ago

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: image

Working on an isolated repro ✍️

layershifter commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

ljharb commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 3 years ago

react 17 has been released.

ljharb commented 3 years ago

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

egor-xyz commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

fwiw i had some issues w/ @wojtekmaj/enzyme-adapter-react-17 & TS. Added es-abstract@1.18.0-next.1 and it resolved the issue

palerdot commented 3 years ago

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 commented 3 years ago

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

ljharb commented 3 years ago

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

gabrieledarrigo commented 3 years ago

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

sanbornhilland commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

k2snowman69 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

ljharb commented 3 years ago

@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.

coderkevin commented 3 years ago

The fact that this issue hasn't been resolved in over 1/2 a year just pushed me to move all my testing over to react testing library, so thanks for the nudge.

ljharb commented 3 years ago

@coderkevin that's really not a helpful or a friendly message. React 17 has only been out for 4 months; it's a pandemic; and I'm a solo engineer maintaining this library for free. I'd also hope that someone working for your particular employer had a bit more compassion for open source maintainers.

If you'd like to increase the chances it gets done faster, there's a sponsor button up there you are more then welcome to click.

coderkevin commented 3 years ago

My apologies, Jordan. I was pretty frustrated at the time I wrote that. I didn't realize Enzyme was no longer supported by Airbnb. I understand what it's like to try to support an open source project with little to no corporate backing. So, again, I'm sorry for my abrasive response above. (To be clear, my employer isn't involved with this issue. It's my own volunteer work I cannot upgrade to React 17 because of this.)

ljharb commented 3 years ago

I appreciate that.

For the record, the primary issue right now is that npm 7's promotion to latest has broken the tests in a number of my repos, including enzyme. Once those tests pass (here's an example failure), I can rebase #2430 and try to get it to a prerelease-capable place.

jmitchell38488 commented 3 years ago

@ljharb did not know enzyme was no longer maintained by airbnb, will definitely do what I can to contribute.

ar-to commented 3 years ago

I know @ljharb is working hard on this but I did test @wojtekmaj https://github.com/enzymejs/enzyme/issues/2429#issuecomment-679265564 https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17 and it works for my problem so thanks for that. At least until the next update to enzyme :)

GenghisKhan commented 3 years ago

@ljharb I know this is a tough time and you are probably very busy but do you have a rough idea on when the official enzyme-adapter-react-17 is going to be released? Are we looking at 1 month? 3-6 months? 1 year?

jmitchell38488 commented 3 years ago

@GenghisKhan there's WIP here https://github.com/enzymejs/enzyme/pull/2430

ghost commented 3 years ago

Are there any updates on this? It's been quite a while...

tarjei commented 3 years ago

Would it help with more monetary contributions to the project?

gaearon commented 3 years ago

The fact that this issue hasn't been resolved in over 1/2 a year just pushed me to move all my testing over to react testing library, so thanks for the nudge.

While tangential to the issue, I think it’s worth noting that if you can use a project like React Testing Library that doesn’t depend on React internals, it’s generally a good idea. At FB we’ve frozen Enzyme tests to stay on an old version of React that won’t be upgraded for this reason, and we banned using it in any new tests. I don’t want to hijack this issue with an unrelated discussion, but for people who feel blocked by this, I want to provide some encouragement that it’s a worthwhile investment to use a different approach.

ljharb commented 3 years ago

@pepperrone no update yet. @tarjei while more funding would always help (we've received virtually zero ever, despite being used by many companies to help maintain their own revenue) it's a function of time more than money.

@gaearon this is both tangential and unhelpful. RTL only allows testing in an environment with a DOM, which is simply not a viable replacement when server rendering. A testing tool for React currently must depend on internals to do a good job at testing React components, because React itself does not provide affordances for doing so.

If using RTL or anything else helps someone be unblocked, great! Do so. I will continue to try to release #2430 as soon as I can, so that enzyme no longer blocks anyone from using React 17.

Hypnosphi commented 3 years ago

despite being used by many companies to help maintain their own revenue

If that's an issue you may want to consider moving away from MIT license

ljharb commented 3 years ago

@Hypnosphi i'm not interested in coercing people to provide fair compensation. I'd rather work for free forever than receive money by use of force.

Hopefully, businesses will realize, on their own, that not funding their dependencies is tantamount to fiscal negligence, and that their fiduciary duty will catch up to them eventually :-)

gabrieledarrigo commented 3 years ago

@ljharb If some founding is going to help I'd really like to contribute : ) I wanted to help "the code way", but after some digging, I faced up to reality: I eventually need a lot more time to understand Enzyme internals and I'm probably useless with this PR : (

@gaearon I guess that the point here is Shallow rendering 🤯 I followed some discussions about decoupling Shallow rendering from the React library when hooks were released (and I personally don't know where that discussion led up), and I know that the suggestion was: just mount your component under test and eventually mock components in the subtree.

But, even now, I found Shallow rendering a better solution to unit test components:

In any case, It's sad 😢 to see a helpful library like Enzyme lagging behind and losing traction at the expense of RTL, but we know, welcome to the JS ecosystem baby!

PeterNitscheMGM commented 3 years ago

@ljharb Hi Jordan,

the company I'm working for is really interested in the React 17 support. Is there anything we can do to achieve this goal?

We are looking forward collaborating with you!

Best regards Peter

wojtekmaj commented 3 years ago

There's an unofficial React 17 adapter available right now ⬇️

A friendly reminder (and a shameless self-promotion) that I published @wojtekmaj/enzyme-adapter-react-17 package a while ago.

It's mostly based on #2430 and should be good enough to use if the only thing blocking you from upgrading to React 17 was a broken adapter. Try it before nagging Jordan who's already working as hard as he possibly can to provide us an official React 17 adapter. One more notification in his inbox isn't going to make things go any faster.

Use it like any other Enzyme adapter, so:

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

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

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

jonathan-irvin commented 3 years ago

There's an unofficial React 17 adapter available right now ⬇️

A friendly reminder (and a shameless self-promotion) that I published @wojtekmaj/enzyme-adapter-react-17 package a while ago.

It's mostly based on #2430 and should be good enough to use if the only thing blocking you from upgrading to React 17 was a broken adapter. Try it before nagging Jordan who's already working as hard as he possibly can to provide us an official React 17 adapter. One more notification in his inbox isn't going to make things go any faster.

Use it like any other Enzyme adapter, so:

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

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

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

Hats off to you, good sir. Your work has been the icing on the cake for me today.

GenghisKhan commented 3 years ago

There's an unofficial React 17 adapter available right now ⬇️

A friendly reminder (and a shameless self-promotion) that I published @wojtekmaj/enzyme-adapter-react-17 package a while ago.

It's mostly based on #2430 and should be good enough to use if the only thing blocking you from upgrading to React 17 was a broken adapter. Try it before nagging Jordan who's already working as hard as he possibly can to provide us an official React 17 adapter. One more notification in his inbox isn't going to make things go any faster.

Use it like any other Enzyme adapter, so:

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

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

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

It's been solid for me for the last few months. Thanks @wojtekmaj for your work on the adapter. There is really no need to wait for the official one. 👍

TeoTN commented 3 years ago

There's one thing I wanted to voice here, that might be a difficult question but probably it's an important one too. Wouldn't it be better for the wide React community to deprecate Enzyme in favour of RTL?

I was first using Enzyme in 2016 and it was the best back then but I think there are substantial issues that it creates today.

  1. I saw it being an impediment to the adoption of newer React versions, as Enzyme usually falling behind the React releases with its adapters. For instance, it's been over 2 years now the hooks api was introduced and there are still significant issues unresolved. For example, you can't really use shallow + redux hooks (see issues #2309 #2174 ). So sometimes the end result is that people refrain from using some React features that are here to stay, because there's no viable / easy (not hacky) way to test them.
  2. It is easier to misuse than RTL - while this is anecdotal, I've seen far more developers writing tests coupled to component's implementation details using Enzyme than not. I've seen too many examples of expect(wrapper.props()).toMatchSnapshot() or test that renders component with certain function as prop, gets it using wrapper.props().fn and assert it's the same as passed it (effectively testing if JSX is working). The alternative intentionally doesn't give too many options to peek into the implementation details.
  3. It is not as effective as RTL in promoting thinking about accessibility and customer experience. I'm thinking of queries that are oriented around what user sees and how they use accessibility features.
  4. We currently have two completely different competing standards in the market, where developers effectively need to be proficient in both, with no clear path forward

I understand that particular experiences might be different or some evidence is anecdotal, and there will be opinions, but I'm curious if others have similar experiences? Would it not be beneficial to the community to have single testing solution that doesn't have the above issues, and is promoted as the main solution?