enzyme icon indicating copy to clipboard operation
enzyme copied to clipboard

Published 20 hours ago • verified publisher icon enzymejs

Complete React 16 support

Open ljharb opened this issue 6 years ago • 36 comments

Overarching project: https://github.com/airbnb/enzyme/projects/4

  • [ ] Error Boundaries
    • [x] componentDidCatch
      • [x] #1255
    • [ ] Improve filenames in stack (https://github.com/facebook/react/pull/12059)
    • [x] getDerivedStateFromError (#2036)
  • [x] Portals
    • [x] #1710
    • [x] #1507
    • [x] #252
  • [x] React.Fragment
    • [x] ~~#1503~~
    • [x] #1733
    • [x] #1799
  • [ ] Rendering non-jsx
    • [ ] #1149
    • [x] #1178
    • [ ] #1213
    • [x] #1498
  • [ ] General issues around our use of private APIs
    • [ ] #1512
  • [ ] New context APIs in 16.3
    • [x] #1509
    • [x] #1513
    • [x] #1647
    • [x] #1737
    • [x] #1908
    • [ ] contextType (16.6) (#2189, upstream PR)
    • [x] better support for render props (#1863)
  • [x] forwardRef
    • [x] #1604
    • [x] #1592
    • [x] #1810 / #1817
  • [x] createRef
    • [x] #1704
  • [ ] <React.StrictMode />: https://reactjs.org/docs/strict-mode.html
    • [ ] include mode in component stack (https://github.com/facebook/react/pull/13240)
  • [ ] <React.unstable_AsyncMode /> / <React.unstable_ConcurrentMode />:
  • [x] lazy/Suspense (16.6, #1917)
  • [x] memo (16.6, #1875)
  • [ ] hooks (16.8, #1938)
  • [x] Profiler (#2054, #2233)

ljharb avatar Mar 02 '18 22:03 ljharb

Isnt #1229 related to this?

MarcoNicolodi avatar Mar 12 '18 17:03 MarcoNicolodi

@MarcoNicolodi I don't think it is; that issue might either be a bug in v3 or intended behavior, but it's not related to React 16 specifically.

ljharb avatar Mar 13 '18 07:03 ljharb

@ljharb I have verified that #1592 solves the forwardRef problem.

What is the release plan for these fixes? New versions for each feature or one release when all of these are completed?

Please let me know if there is anything I can do to help out.

petegleeson avatar Apr 05 '18 23:04 petegleeson

I’m hoping to bunch together as many as possible; there’s currently a backlog for me to go through, after which i hope to cut a release.

ljharb avatar Apr 12 '18 01:04 ljharb

@ljharb is there a list of issues you'd like to get merged before releasing a new version on npm? Would love to see this one get released soon: https://github.com/airbnb/enzyme/pull/1513 as my team has already migrated our codebase so just waiting on tests passing.

Perhaps we could help finish up some issues for you to get the release in.

ghost avatar Apr 16 '18 15:04 ghost

Nope, just #1504 - createRef() works fine when it's nested. ~~What about createRef()? I'm hitting that not working in https://github.com/styled-components/styled-components/pull/1720 - even with just pure react + enzyme. Here's the test copied over:~~

test('enzyme should mount object refs', () => {
  const ref = React.createRef()
  const wrapper = mount(<div ref={ref} />)
  const div = wrapper.find('div').first()
  expect(div).toBeTruthy()
  expect(ref).toHaveProperty('current', div.instance())
})

~~Is this just a dumb mistake I'm making?~~

simonbuchan avatar May 02 '18 06:05 simonbuchan

Is there any chance of an alpha release, or do all features need to be supported in one go?

nemoDreamer avatar May 15 '18 00:05 nemoDreamer

Not sure if this is bundled together with <React.Fragment />, just adding a note in here about <React.StrictMode />: https://reactjs.org/docs/strict-mode.html

hvolschenk avatar May 18 '18 10:05 hvolschenk

I've created a PR to support getSnapshotBeforeUpdate for shallow https://github.com/airbnb/enzyme/pull/1657

koba04 avatar May 19 '18 15:05 koba04

Can you confirm that the forwardRef problem is solved by facebook/react#12725 ?

sambokai avatar May 20 '18 18:05 sambokai

Also, found inconsistency with React.Fragment. Thought to share:

Describe the bug Shallow should find direct child when inside React.Fragment. (At least it does so for indirect descendants).

To Reproduce

import * as React from 'react';
import {shallow} from 'enzyme';

const MyCom = () => (
  <div className="container">
    <React.Fragment>
      <span>A span</span>
    </React.Fragment>
  </div>
);

describe('enzyme shallow', () => {
  it('test#1: should find descendant span inside fragment ', () => {
    const myCom = shallow(<MyCom />);
    expect(myCom.find('.container span')).toHaveLength(1);
  });

  // TEST FAILS
  it('test#2: should find direct child span inside fragment', () => {
    const myCom = shallow(<MyCom />);
    expect(myCom.find('.container > span')).toHaveLength(1);
  });
});

Expected behavior Expect test#2 to pass.

Desktop (please complete the following information):

  • OS: Ubuntu 16.04 LTS GNOME
  • Browser: X
  • Version: X

Additional context Tests are failing inside Jest.

sepo27 avatar Jun 08 '18 14:06 sepo27

Is this package dead? Last release to npm was half a year ago, not even patch versions since then. I would be happy to know what happened.

omril1 avatar Jun 16 '18 18:06 omril1

Could it be AirBnB drops support for React Native = no more updates to Enzyme React adapter? There was a comment on a post I've referenced below mentioning the trouble they've had when React Native went to React 16 alpha and beta.

Can someone comment from the team? I have been updating some code that used Enzyme and it worked fine until the React 16.4 updates. Here's the post: https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

krimple avatar Jul 03 '18 20:07 krimple

@krimple no, it absolutely could not be that, and that's ridiculous. All of airbnb.com is in React, and our investment in it has only increased. (the trouble around React 16 and react native is because RN itself unfortunately chose to require an alpha version of React 16 while dropping compat for React 15, and is unrelated to enzyme).

Enzyme currently does not support any of the new features in React 16; that will change in the next release. This project isn't dead in any way; it's just maintained by one person (hi!) who has a personal life and a busy schedule at work.

ljharb avatar Jul 04 '18 05:07 ljharb

Thanks for clarifying. Not implying anything negative about the project or your hard work. Just wanted to know if it correlated. I just edited the orginal comment above. It reads harshly and I am sorry for that. It is a privilege to be able to use open source code. Cut off the stuff at the end.

On Jul 4, 2018, at 1:32 AM, Jordan Harband [email protected] wrote:

@krimple no, it absolutely could not be that, and that's ridiculous. All of airbnb.com is in React, and our investment in it has only increased. (the trouble around React 16 and react native is because RN itself unfortunately chose to require an alpha version of React 16 while dropping compat for React 15, and is unrelated to enzyme).

Enzyme currently does not support any of the new features in React 16; that will change in the next release. This project isn't dead in any way; it's just maintained by one person (hi!) who has a personal life and a busy schedule at work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

krimple avatar Jul 04 '18 07:07 krimple

And it turns out the project I was testing used create-react-app and what fixed my issue was upgrading the jest-runner to the latest version. I was digging deep into a rabbit hole and the problem had nothing to do with Enzyme. My apologies again.

krimple avatar Jul 04 '18 19:07 krimple

So, how Airbnb managed to survive all those months? Not using any React 16 features? Creating temporary hacks in tests?

the-spyke avatar Aug 01 '18 14:08 the-spyke

@the-spyke not using any React 16 features - we don't use things we can't test.

ljharb avatar Aug 02 '18 06:08 ljharb

@ljharb Which means Airbnb has no need for updated Enzyme. Sounds like chicken-egg problem :-) Thanks for the answer -- now I know what to do.

the-spyke avatar Aug 02 '18 07:08 the-spyke

@the-spyke on the contrary; we have a huge need for it, and are dying to use the new React features. "Need" doesn't directly translate to "available time to work on it", however, which is why it's taken this long. However, now we have two engineers spending actual roadmap time on it, so there will be a release soon.

ljharb avatar Aug 02 '18 07:08 ljharb

The following packages are now released:

ljharb avatar Aug 08 '18 05:08 ljharb

@ljharb I'm assuming since the issues linked in the description are still open that these still only support <16 features, but running against 16+, as a first step? Well, CHANGELOG mentions React.Fragment...

simonbuchan avatar Aug 08 '18 06:08 simonbuchan

@simonbuchan React.Fragment is a v16.2 feature, and this is now supported. There's still a bunch of work to go, but the new releases cover the work done so far.

ljharb avatar Aug 08 '18 06:08 ljharb

forwardRef still doesn't work, by the way.

the-spyke avatar Aug 08 '18 08:08 the-spyke

@the-spyke I’m pretty sure that my interaction on #1592, and the lack of a check on the box in the OP, should make that clear to everybody

ljharb avatar Aug 08 '18 15:08 ljharb

That's a little unfair, it was unclear enough from your earlier comment that I had to ask!

simonbuchan avatar Aug 08 '18 22:08 simonbuchan

@simonbuchan fair enough :-) sorry if my reply was harsh.

ljharb avatar Aug 09 '18 01:08 ljharb

The PR for the Context API support is merged, can we find it in this new release I guess? What's still missing to check its checkbox?

FezVrasta avatar Aug 09 '18 14:08 FezVrasta

Yes it is but there is a bug with github where clicking the check mark unchecks the others so you have to manually edit the markdown.

maxkostow avatar Aug 09 '18 15:08 maxkostow

@maxkostow i'm not aware of any such bug; that checkbox has never been checked on this issue.

@FezVrasta i'll update the list of issues for context; check https://github.com/airbnb/enzyme/projects/4#card-11112928 for a larger list of issues.

ljharb avatar Aug 09 '18 22:08 ljharb