[Fix] mount: .text(): properly recurse through fragments and arrays

[New] `RSTTraversal`: add `getTextFromHostNodes` Fixes #2028.
enzymejs · Mar 9, 2019 · 8bbb61d · 8bbb61d
1 parent a00ed0b
commit 8bbb61d
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 20 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -3860,6 +3860,28 @@ describeWithDOM('mount', () => {
         expect(constWrapper.text()).to.include('Foo');
         expect(constWrapper.text()).to.include('Bar');
       });
+
+      it('works with a nested component', () => {
+        const Title = ({ children }) => <span>{children}</span>;
+        const Foobar = () => (
+          <Fragment>
+            <Title>Foo</Title>
+            <Fragment>Bar</Fragment>
+          </Fragment>
+        );
+
+        const wrapper = mount(<Foobar />);
+        const text = wrapper.text();
+        expect(wrapper.debug()).to.equal(`<Foobar>
+  <Title>
+    <span>
+      Foo
+    </span>
+  </Title>
+  Bar
+</Foobar>`);
+        expect(text).to.equal('FooBar');
+      });
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -3820,6 +3820,26 @@ describe('shallow', () => {
         expect(constWrapper.text()).to.include('Foo');
         expect(constWrapper.text()).to.include('Bar');
       });
+
+      it('works with a nested component', () => {
+        const Title = ({ children }) => <span>{children}</span>;
+        const Foobar = () => (
+          <Fragment>
+            <Title>Foo</Title>
+            <Fragment>Bar</Fragment>
+          </Fragment>
+        );
+
+        const wrapper = shallow(<Foobar />);
+        const text = wrapper.text();
+        expect(wrapper.debug()).to.equal(`<Fragment>
+  <Title>
+    Foo
+  </Title>
+  Bar
+</Fragment>`);
+        expect(text).to.equal('<Title />Bar');
+      });
     });
   });
 

diff --git a/packages/enzyme/src/RSTTraversal.js b/packages/enzyme/src/RSTTraversal.js
@@ -128,7 +128,21 @@ export function nodeMatchesObjectProps(node, props) {
   return isSubset(propsOfNode(node), replaceUndefinedValues(props));
 }
 
-export function getTextFromNode(node) {
+function getTextFromHostNode(hostNode) {
+  if (typeof hostNode === 'string') {
+    return String(hostNode || '');
+  }
+  if (!hostNode) {
+    return '';
+  }
+  return hostNode.textContent || '';
+}
+
+function getTextFromRSTNode(node, {
+  getCustom,
+  handleHostNodes,
+  recurse,
+}) {
   if (node == null) {
     return '';
   }
@@ -137,9 +151,33 @@ export function getTextFromNode(node) {
     return String(node);
   }
 
-  if (node.type && typeof node.type === 'function') {
-    return `<${node.type.displayName || functionName(node.type)} />`;
+  if (getCustom && node.type && typeof node.type === 'function') {
+    return getCustom(node);
+  }
+
+  if (handleHostNodes && node.nodeType === 'host') {
+    return handleHostNodes(node);
   }
+  return childrenOfNode(node).map(recurse).join('');
+}
 
-  return childrenOfNode(node).map(getTextFromNode).join('');
+export function getTextFromNode(node) {
+  return getTextFromRSTNode(node, {
+    recurse: getTextFromNode,
+    getCustom({ type }) {
+      return `<${type.displayName || functionName(type)} />`;
+    },
+  });
+}
+
+export function getTextFromHostNodes(node, adapter) {
+  return getTextFromRSTNode(node, {
+    recurse(item) {
+      return getTextFromHostNodes(item, adapter);
+    },
+    handleHostNodes(item) {
+      const nodes = [].concat(adapter.nodeToHostNode(item, true));
+      return nodes.map(getTextFromHostNode).join('');
+    },
+  });
 }
diff --git a/packages/enzyme/src/ReactWrapper.js b/packages/enzyme/src/ReactWrapper.js
@@ -23,6 +23,7 @@ import {
   childrenOfNode,
   parentsOfNode,
   treeFilter,
+  getTextFromHostNodes,
 } from './RSTTraversal';
 
 import { buildPredicate, reduceTreesBySelector } from './selectors';
@@ -574,22 +575,7 @@ class ReactWrapper {
    */
   text() {
     const adapter = getAdapter(this[OPTIONS]);
-    return this.single('text', (n) => {
-      const node = adapter.nodeToHostNode(n, true);
-      if (!node) {
-        return typeof n === 'string' ? n : node;
-      }
-
-      const nodeArray = Array.isArray(node) ? node : [node];
-      const textContent = nodeArray.map((item) => {
-        if (!item) {
-          return '';
-        }
-        return item.textContent || '';
-      });
-
-      return textContent.join('');
-    });
+    return this.single('text', n => getTextFromHostNodes(n, adapter));
   }
 
   /**