[Fix] mount: properly handle HTML of multiple nodes

Fixes #2052.
enzymejs · Mar 15, 2019 · 558d5cf · 558d5cf
1 parent e695eb4
commit 558d5cf
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 9 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -5399,6 +5399,27 @@ describeWithDOM('mount', () => {
         </Fragment>
       );
 
+      class ClassChild extends React.Component {
+        render() {
+          return <div>Class child</div>;
+        }
+      }
+
+      function SFCChild() {
+        return <div>SFC child</div>;
+      }
+
+      class FragmentWithCustomChildClass extends React.Component {
+        render() {
+          return (
+            <Fragment>
+              <ClassChild />
+              <SFCChild />
+            </Fragment>
+          );
+        }
+      }
+
       it('correctly renders html for both children for class', () => {
         const classWrapper = mount(<FragmentClassExample />);
         expect(classWrapper.html()).to.equal('<div><span>Foo</span></div><div><span>Bar</span></div>');
@@ -5408,6 +5429,11 @@ describeWithDOM('mount', () => {
         const constWrapper = mount(<FragmentConstExample />);
         expect(constWrapper.html()).to.equal('<div><span>Foo</span></div><div><span>Bar</span></div>');
       });
+
+      it('correctly renders html for custom component children', () => {
+        const withChildrenWrapper = mount(<FragmentWithCustomChildClass />);
+        expect(withChildrenWrapper.html()).to.equal('<div>Class child</div><div>SFC child</div>');
+      });
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -5487,6 +5487,27 @@ describe('shallow', () => {
         </Fragment>
       );
 
+      class ClassChild extends React.Component {
+        render() {
+          return <div>Class child</div>;
+        }
+      }
+
+      function SFCChild() {
+        return <div>SFC child</div>;
+      }
+
+      class FragmentWithCustomChildClass extends React.Component {
+        render() {
+          return (
+            <Fragment>
+              <ClassChild />
+              <SFCChild />
+            </Fragment>
+          );
+        }
+      }
+
       it('correctly renders html for both children for class', () => {
         const classWrapper = shallow(<FragmentClassExample />);
         expect(classWrapper.html()).to.equal('<div><span>Foo</span></div><div><span>Bar</span></div>');
@@ -5496,6 +5517,11 @@ describe('shallow', () => {
         const constWrapper = shallow(<FragmentConstExample />);
         expect(constWrapper.html()).to.equal('<div><span>Foo</span></div><div><span>Bar</span></div>');
       });
+
+      it('correctly renders html for custom component children', () => {
+        const withChildrenWrapper = shallow(<FragmentWithCustomChildClass />);
+        expect(withChildrenWrapper.html()).to.equal('<div>Class child</div><div>SFC child</div>');
+      });
     });
   });
 

diff --git a/packages/enzyme/src/RSTTraversal.js b/packages/enzyme/src/RSTTraversal.js
@@ -142,6 +142,7 @@ function getTextFromRSTNode(node, {
   getCustom,
   handleHostNodes,
   recurse,
+  nullRenderReturnsNull = false,
 }) {
   if (node == null) {
     return '';
@@ -158,6 +159,9 @@ function getTextFromRSTNode(node, {
   if (handleHostNodes && node.nodeType === 'host') {
     return handleHostNodes(node);
   }
+  if (node.rendered == null && nullRenderReturnsNull) {
+    return null;
+  }
   return childrenOfNode(node).map(recurse).join('');
 }
 
@@ -190,13 +194,14 @@ function getHTMLFromHostNode(hostNode) {
 }
 
 export function getHTMLFromHostNodes(node, adapter) {
-  if (node === null) return null;
-
-  const hostNode = adapter.nodeToHostNode(node, true);
-  if (hostNode === null) return null;
-
-  const nodeArray = Array.isArray(hostNode) ? hostNode : [hostNode];
-  const nodesHTML = nodeArray.map(item => getHTMLFromHostNode(item));
-
-  return nodesHTML.join('');
+  return getTextFromRSTNode(node, {
+    recurse(item) {
+      return getHTMLFromHostNodes(item, adapter);
+    },
+    handleHostNodes(item) {
+      const nodes = [].concat(adapter.nodeToHostNode(item, true));
+      return nodes.map(getHTMLFromHostNode).join('');
+    },
+    nullRenderReturnsNull: true,
+  });
 }