[Fix] shallow/mount: containsMatchingElement: trim whitespace

Fixes #636.

Author: ljharb

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

@@ -5940,6 +5940,28 @@ describeWithDOM('mount', () => {
       expect(wrapper.containsMatchingElement(<div className="c" id={null} />)).to.equal(true);
       expect(wrapper.containsMatchingElement(<div className="c" id={undefined} />)).to.equal(true);
     });
+
+    it('works with leading and trailing spaces', () => {
+      const wrapper = mount((
+        <li>
+          <a> All Operations </a>
+        </li>
+      ));
+
+      expect(wrapper.containsMatchingElement(<a> All Operations </a>)).to.equal(true);
+    });
+
+    it('works with leading and trailing newlines', () => {
+      const wrapper = mount((
+        <li>
+          <a>
+            All Operations
+          </a>
+        </li>
+      ));
+
+      expect(wrapper.containsMatchingElement(<a> All Operations </a>)).to.equal(true);
+    });
   });
 
   describe('.containsAllMatchingElements(nodes)', () => {

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

@@ -6040,12 +6040,8 @@ describe('shallow', () => {
           <div onClick={spy2} style={{ fontSize: 13, color: 'blue' }}>Goodbye World</div>
         </div>
       ));
-      expect(wrapper.containsMatchingElement((
-        <div>Hello World</div>
-      ))).to.equal(true);
-      expect(wrapper.containsMatchingElement((
-        <div>Goodbye World</div>
-      ))).to.equal(true);
+      expect(wrapper.containsMatchingElement(<div>Hello World</div>)).to.equal(true);
+      expect(wrapper.containsMatchingElement(<div>Goodbye World</div>)).to.equal(true);
       expect(wrapper.containsMatchingElement((
         <div onClick={spy1} style={{ fontSize: 12, color: 'red' }}>Hello World</div>
       ))).to.equal(true);
@@ -6071,9 +6067,7 @@ describe('shallow', () => {
           <div onClick={spy2} style={{ fontSize: 13, color: 'blue' }}>Goodbye World</div>
         </div>
       ));
-      expect(wrapper.containsMatchingElement((
-        <div>Bonjour le monde</div>
-      ))).to.equal(false);
+      expect(wrapper.containsMatchingElement(<div>Bonjour le monde</div>)).to.equal(false);
       expect(wrapper.containsMatchingElement((
         <div onClick={spy2}>Au revoir le monde</div>
       ))).to.equal(false);
@@ -6102,6 +6096,28 @@ describe('shallow', () => {
       expect(wrapper.containsMatchingElement(<div className="c" id={null} />)).to.equal(true);
       expect(wrapper.containsMatchingElement(<div className="c" id={undefined} />)).to.equal(true);
     });
+
+    it('works with leading and trailing spaces', () => {
+      const wrapper = shallow((
+        <li>
+          <a> All Operations </a>
+        </li>
+      ));
+
+      expect(wrapper.containsMatchingElement(<a> All Operations </a>)).to.equal(true);
+    });
+
+    it('works with leading and trailing newlines', () => {
+      const wrapper = shallow((
+        <li>
+          <a>
+            All Operations
+          </a>
+        </li>
+      ));
+
+      expect(wrapper.containsMatchingElement(<a> All Operations </a>)).to.equal(true);
+    });
   });
 
   describe('.containsAllMatchingElements(nodes)', () => {

packages/enzyme/package.json

@@ -51,7 +51,8 @@
     "object.entries": "^1.0.4",
     "object.values": "^1.0.4",
     "raf": "^3.4.0",
-    "rst-selector-parser": "^2.2.3"
+    "rst-selector-parser": "^2.2.3",
+    "string.prototype.trim": "^1.1.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

packages/enzyme/src/Utils.js

@@ -5,6 +5,7 @@ import entries from 'object.entries';
 import functionName from 'function.prototype.name';
 import has from 'has';
 import flat from 'array.prototype.flat';
+import trim from 'string.prototype.trim';
 
 import { get } from './configuration';
 import { childrenOfNode } from './RSTTraversal';
@@ -134,8 +135,8 @@ function internalNodeCompare(a, b, lenComp, isLoose) {
   const childCompare = isLoose ? childrenMatch : childrenEqual;
   if (leftHasChildren || rightHasChildren) {
     if (!childCompare(
-      childrenToSimplifiedArray(left.children),
-      childrenToSimplifiedArray(right.children),
+      childrenToSimplifiedArray(left.children, isLoose),
+      childrenToSimplifiedArray(right.children, isLoose),
       lenComp,
     )) {
       return false;
@@ -184,7 +185,7 @@ function childrenToArray(children) {
   return result;
 }
 
-export function childrenToSimplifiedArray(nodeChildren) {
+export function childrenToSimplifiedArray(nodeChildren, isLoose = false) {
   const childrenArray = childrenToArray(nodeChildren);
   const simplifiedArray = [];
 
@@ -202,6 +203,10 @@ export function childrenToSimplifiedArray(nodeChildren) {
     }
   }
 
+  if (isLoose) {
+    return simplifiedArray.map(x => (typeof x === 'string' ? trim(x) : x));
+  }
+
   return simplifiedArray;
 }