Enzyme: Complete React 16 support

Created on 2 Mar 2018 · 36Comments · Source: enzymejs/enzyme

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

[ ] Error Boundaries
- [x] [componentDidCatch](#1797)
  - [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
- [ ] #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](https://github.com/facebook/react/pull/14679) (16.8, #1938)
[x] Profiler (#2054, #2233)

mount render shallow Fiber Support Tests enhancement help wanted package 16 package 16.1 package 16.2 package 16.3

Source

ljharb

👍119 ❤9

Most helpful comment

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 on 16 Jun 2018

👍23 👎1

All 36 comments

Isnt #1229 related to this?

MarcoNicolodi on 12 Mar 2018

@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 on 13 Mar 2018

@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 on 6 Apr 2018

👍2

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 on 12 Apr 2018

❤5 👍2

@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 on 16 Apr 2018

👍7

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 on 2 May 2018

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

nemoDreamer on 15 May 2018

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 on 18 May 2018

👍2

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

koba04 on 19 May 2018

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

sambokai on 20 May 2018

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 on 8 Jun 2018

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 on 16 Jun 2018

👍23 👎1

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 on 3 Jul 2018

@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 on 4 Jul 2018

❤15 👍5

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 notifications@github.com 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 on 4 Jul 2018

👍2

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 on 4 Jul 2018

👍2

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

the-spyke on 1 Aug 2018

👍6

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

ljharb on 2 Aug 2018

😄2

@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 on 2 Aug 2018

😄2 👎1

@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 on 2 Aug 2018

🎉13 👍2

The following packages are now released:

ljharb on 8 Aug 2018

👍7 🎉5

@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 on 8 Aug 2018

@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 on 8 Aug 2018

👍2

forwardRef still doesn't work, by the way.

the-spyke on 8 Aug 2018

@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 on 8 Aug 2018

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

simonbuchan on 9 Aug 2018

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

ljharb on 9 Aug 2018

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 on 9 Aug 2018

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 on 9 Aug 2018

@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 on 10 Aug 2018

👍1

re: 16.6 contextType support - I just put out facebook/react#14329 - it's a PR for the shallow react-test-renderer so that when contextType is defined, you can just pass it a context.