[New] add `enzyme-adapter-react-17`

[layershifter]

Fixes #2429.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 91.60156% with 43 lines in your changes are missing coverage. Please review.

Project coverage is 95.61%. Comparing base (cdfb1c6) to head (898978f). Report is 88 commits behind head on master.

Files	Patch %	Lines
...pter-react-17/src/findCurrentFiberUsingSlowPath.js	68.42%	18 Missing :warning:
...zyme-adapter-react-17/src/ReactSeventeenAdapter.js	95.90%	16 Missing :warning:
...ges/enzyme-adapter-react-17/src/detectFiberTags.js	85.24%	9 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2430      +/-   ##
==========================================
- Coverage   96.12%   95.61%   -0.52%     
==========================================
  Files          49       53       +4     
  Lines        4004     4516     +512     
  Branches     1123     1288     +165     
==========================================
+ Hits         3849     4318     +469     
- Misses        155      198      +43     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[silver-snoopy]

Dear @layershifter thanks for the PR!

Any update on this? React team has released V17 2 days ago, and It would be very much appreciated if this PR could go through

[wojtekmaj]

FYI, this might be affected by the bug reported in my temporary adapter repo:

https://github.com/wojtekmaj/enzyme-adapter-react-17/issues/1

[layershifter]

Dear @layershifter thanks for the PR!

Any update on this? React team has released V17 2 days ago, and It would be very much appreciated if this PR could go through

I stopped to work on it after @ljharb comment: https://github.com/enzymejs/enzyme/pull/2430#pullrequestreview-466131356. I am also interested in getting this.

[ljharb]

Indeed, that linked bug is one of the blockers I've run into in my local work.

I'd be more than happy to pull in additional commits to this PR, and to my local implementation, in service of getting something published ASAP.

[ljharb]

I've rebased this branch and included my WIP. There's still 8 failing tests (and 2 I've temporarily patched), that fall into these categories:

1. unknown node with tag 23. tag 23 is "OffscreenComponent" in the latest react-reconciler repo, but I have no idea how to render something useful here.
2. simulate issues in shallow: marked with "TODO: figure out why this is broken in shallow rendering in react 17"
3. issues because the getComponentStack function in enzyme-adapter-utils no longer creates an accurate error stack for React 17.

Please post links to commits/branches, and I'll pull them into the PR.

[eps1lon]

1. unknown node with tag 23. tag 23 is "OffscreenComponent" in the latest react-reconciler repo, but I have no idea how to render something useful here.

getLazyFiber("div").return.return.tag should do: https://codesandbox.io/s/offscreencomponent-tag-9hsq9

[ljharb]

@eps1lon awesome, thanks! the other side of this is, how do i locate, off of the FiberNode, what should be rendered? It's got a bunch of circular references. The best I could come up with makes this:

class Component extends React.Component {
        render() {
          return (
            <div>test</div>
          );
        }
      }

      const SuspenseComponent = () => (
        <Suspense fallback={Fallback}>
          <Component />
        </Suspense>
      );

map to this:

<SuspenseComponent>
  <Suspense fallback={[Function: Fallback]}>
    <Suspense mode="visible" />
  </Suspense>
</SuspenseComponent>

with this:

     case FiberTags.OffscreenComponent: {                                                                                                                                                                   
       console.log(node.return.memoizedProps.children);                                                                                                                                                     
       return {                                                                                                                                                                                             
         nodeType: 'function',                                                                                                                                                                              
         type: Suspense,                                                                                                                                                                                    
         props: { ...node.memoizedProps },                                                                                                                                                                  
         key: ensureKeyOrUndefined(node.key),                                                                                                                                                               
         ref: node.ref,                                                                                                                                                                                     
         instance: null,                                                                                                                                                                                    
         rendered: childrenToTree(nodeToHostNode(node.return.memoizedProps.children)),                                                                                                                      
       };                                                                                                                                                                                                   
     }                                                                                     

[eps1lon]

I don't have more context on how the OffscreenComponent is handled internally in React. From what I could gather it's used in different scenarios. Some only available with experimental APIs. If you can add a test I might be able to help.

[ljharb]

@eps1lon thanks! the test is already there; i've updated the branch to have my best output so far.

[eps1lon]

@ljharb With

diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js
index 0e69131..bb3477d 100644
--- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js
+++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js
@@ -299,16 +299,7 @@ function toTree(vnode) {
     case FiberTags.Lazy:
       return childrenToTree(node.child);
     case FiberTags.OffscreenComponent: {
-      console.log(node.return.memoizedProps.children);
-      return {
-        nodeType: 'function',
-        type: Suspense,
-        props: { ...node.memoizedProps },
-        key: ensureKeyOrUndefined(node.key),
-        ref: node.ref,
-        instance: null,
-        rendered: childrenToTree(nodeToHostNode(node.return.memoizedProps.children)),
-      };
+      return toTree(node.child);
     }
     default:
       throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`);
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
index c77bf15..234da0b 100644
--- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
+++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -1112,7 +1112,7 @@ describeWithDOM('mount', () => {
       }
     }
 
-    it.only('finds Suspense and its children when no lazy component', () => {
+    it('finds Suspense and its children when no lazy component', () => {
       class Component extends React.Component {
         render() {
           return (
@@ -1130,7 +1130,6 @@ describeWithDOM('mount', () => {
       const wrapper = mount(<SuspenseComponent />);
 
       expect(wrapper.is(SuspenseComponent)).to.equal(true);
-      console.log(wrapper.debug());
       expect(wrapper.find(Component)).to.have.lengthOf(1);
       expect(wrapper.find(Fallback)).to.have.lengthOf(0);
     });

the suspense tests are passing. npm run test:only is still failing on 2 component stack related tests though.

[ljharb]

Awesome, thank you :-) now we're just down to the stack errors.

[Hypnosphi]

Please add a test case for <Suspense> with multiple children. Looks like current approach doesn't cover it properly

<Suspense fallback="">
  <div />
  <div />
</Suspense>

[ljharb]

@Hypnosphi thanks - added in 2c15e59a. The next rebase of this PR will run on it.

[ljharb]

Rebased the branch and fixed some things; we're now at 5 test failures (new tests have landed on master in the interim), all stack trace related. https://travis-ci.com/github/enzymejs/enzyme/jobs/463388239

[kamronbatman]

@ljharb any updates on this? Would love an official adapter 😍

[ljharb]

tests on master are still failing; and this PR still has too many failing tests to cut a prerelease. I'm still working on that.

[jmitchell38488]

Appears as though the only issues now (3) are with the Prop Types

[J-Son89]

Curious whether you have seen issues with wrapper.unMount? similar to this: https://github.com/wojtekmaj/enzyme-adapter-react-17/issues/12

I pulled in the changes in this p.r locally and set them as the adaptor being used and seeing a similar issue.

[J-Son89]

Appears as though the only issues now (3) are with the Prop Types

I was seeing issues with this too :)

[jRichardeau]

Hi, Do you know when the enzyme-adapter-react-17 will be available? My company is waiting for this to migrate to React 17 and I think we are not the only one :) Thank you

[ljharb]

@jRichardeau would your company care to invest some time/resources in getting the tests on this PR to pass? that's the best way to move things along.

[jRichardeau]

Ok it's fair :), my question was badly asked, I just wanted to know if you think this could be available in the next few weeks. I'd love to help, I'll see what I can do...

[wojtekmaj]

Please be aware of the following issue that, due to unofficial adapter nature being tightly related to this PR, may be affecting this adapter.

https://github.com/wojtekmaj/enzyme-adapter-react-17/issues/12

[createthis]

Am I reading this correctly? Tests are passing, but code coverage is a few percentage points lower than the target and that is holding this PR up?

[ljharb]

@createthis last time I ran it, tests weren't passing; you're right that they seem to be passing now - maybe React fixed some bugs in React 17. I'll rebase this PR shortly and see if that's still the case.

[wojtekmaj]

I don't believe that's the case. I copied the entire test suite over to @wojtekmaj/enzyme-adapter-react-17, got

  1618 passing (3s)
  118 pending
  11 failing

on 17.0.0, 17.0.1, and now 17.0.2.

[createthis]

@createthis last time I ran it, tests weren't passing; you're right that they seem to be passing now - maybe React fixed some bugs in React 17. I'll rebase this PR shortly and see if that's still the case.

@ljharb Sounds like a plan.

[createthis]

@wojtekmaj @ljharb I'm trying to understand what is holding up this PR. I followed the CONTRIBUTING guide and performed the following:

git clone https://github.com/layershifter/enzyme.git
cd enzyme
git checkout feat/support-react17
npm install
npm install # running it twice reduces vulnerabilities sometimes
npm run react 17
npm run build
npm test

And received this result:

 1783 passing (3s)
  120 pending

What am I missing?

[eps1lon]

What am I missing?

The maintainers probably want to enable and pass all the skipped tests from TODO_17(true).