[enzyme-adapter-react-16]: [fix] portals and roots may render fragments

enzymejs · Jul 9, 2018 · d602a22 · d602a22
1 parent 5db74e6
commit d602a22
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 5 deletions.
diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -86,9 +86,10 @@ function toTree(vnode) {
   const node = findCurrentFiberUsingSlowPath(vnode);
   switch (node.tag) {
     case HostRoot: // 3
-      return toTree(node.child);
-    case HostPortal: // 4
-      return toTree(node.child);
+      return childrenToTree(node.child);
+    case HostPortal: { // 4
+      return childrenToTree(node.child);
+    }
     case ClassComponent:
       return {
         nodeType: 'class',
@@ -251,11 +252,13 @@ class ReactSixteenAdapter extends EnzymeAdapter {
         } else {
           isDOM = false;
           const { type: Component } = el;
+
           const isStateful = Component.prototype && (
             Component.prototype.isReactComponent
             || Array.isArray(Component.__reactAutoBindPairs) // fallback for createClass components
           );
-          if (!isStateful) {
+
+          if (!isStateful && typeof Component === 'function') {
             const wrappedEl = Object.assign(
               (...args) => Component(...args), // eslint-disable-line new-cap
               Component,

diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -16,7 +16,12 @@ import {
 } from 'enzyme/build/Utils';
 
 import './_helpers/setupAdapters';
-import { createClass, createContext, createPortal } from './_helpers/react-compat';
+import {
+  createClass,
+  createContext,
+  createPortal,
+  Fragment,
+} from './_helpers/react-compat';
 import {
   describeWithDOM,
   describeIf,
@@ -776,6 +781,43 @@ describeWithDOM('mount', () => {
         expect(wrapper.find('button')).to.have.lengthOf(1);
       });
 
+      itIf(is('>= 16.2'), 'should support fragments', () => {
+        const wrapper = mount((
+          <Fragment>
+            <p>hello</p>
+            <span>boo</span>
+          </Fragment>
+        ));
+
+        expect(wrapper).to.have.lengthOf(2);
+      });
+
+      itIf(is('>= 16'), 'should find elements through portals', () => {
+        const containerDiv = global.document.createElement('div');
+        class FooPortal extends React.Component {
+          render() {
+            return createPortal(
+              this.props.children,
+              containerDiv,
+            );
+          }
+        }
+
+
+        const wrapper = mount((
+          <FooPortal>
+            <h1>Successful Portal!</h1>
+            <span />
+          </FooPortal>
+        ));
+
+        expect(wrapper.find('h1')).to.have.lengthOf(1);
+
+        expect(wrapper.find('span')).to.have.lengthOf(1);
+
+        expect(containerDiv.querySelectorAll('h1')).to.have.lengthOf(1);
+      });
+
       it('should support object property selectors', () => {
         const wrapper = mount((
           <div>

diff --git a/packages/enzyme-test-suite/test/_helpers/index.jsx b/packages/enzyme-test-suite/test/_helpers/index.jsx
@@ -26,6 +26,14 @@ export function itIf(test, a, b) {
   }
 }
 
+itIf.only = (test, a, b) => {
+  if (test) {
+    it.only(a, b);
+  } else {
+    it.skip(a, b);
+  }
+};
+
 /**
  * Simple wrapper around mocha it which allows an array of possible values to test against.
  * Each test will be wrapped in a try/catch block to handle any errors.