Merge pull request #662 from vadimdemedes/skip-null-or-undefined-props

[Breaking] Skip undefined props when comparing nodes

Author: ljharb

docs/api/ShallowWrapper/equals.md

@@ -32,4 +32,4 @@ expect(wrapper.equals(<div className="foo bar" />)).to.equal(true);
 when you are calling it you are calling it with a ReactElement or a JSX expression.
 - Keep in mind that this method determines equality based on the equality of the node's children as
 well.
-
+- Following React's behavior, `.equals()` ignores properties whose values are `undefined`.

docs/api/selector.md

@@ -85,10 +85,10 @@ a string can be used to find it:
 function MyComponent() {
   return <div />;
 }
-MyComponent.displayName = 'MyComponent!';
+MyComponent.displayName = 'My Component';
 
 // find instances of MyComponent
-const myComponents = wrapper.find('MyComponent!');
+const myComponents = wrapper.find('My Component');
 ```
 
 NOTE: This will *only* work if the selector (and thus the component's `displayName`) is a string
@@ -113,3 +113,14 @@ wrapper.find({ foo: 3 });
 wrapper.find({ bar: false });
 wrapper.find({ title: 'baz' });
 ```
+
+**Note - undefined properties**
+are not allowed in the object property selector and will cause an error:
+
+
+```jsx
+wrapper.find({ foo: 3, bar: undefined });
+// => TypeError: Enzyme::Props can't have 'undefined' values. Try using 'findWhere()' instead.
+```
+
+If you have to search by `undefined` property value, use [.findWhere()](ShallowWrapper/findWhere.md).

package.json

@@ -104,5 +104,6 @@
     "sinon": "^2.4.1",
     "webpack": "^1.13.3"
   },
-  "dependencies": {}
+  "dependencies": {
+  }
 }

packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js

@@ -23,7 +23,7 @@ export default function elementToTree(el) {
   let rendered = null;
   if (Array.isArray(children)) {
     rendered = flatten(children, true).map(elementToTree);
-  } else if (children !== undefined) {
+  } else if (typeof children !== 'undefined') {
     rendered = elementToTree(children);
   }
   return {

packages/enzyme-adapter-utils/src/Utils.js

@@ -104,7 +104,7 @@ export function elementToTree(el) {
   let rendered = null;
   if (Array.isArray(children)) {
     rendered = flatten(children, true).map(elementToTree);
-  } else if (children !== undefined) {
+  } else if (typeof children !== 'undefined') {
     rendered = elementToTree(children);
   }
   return {

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

@@ -469,6 +469,19 @@ describeWithDOM('mount', () => {
       expect(wrapper.find('[htmlFor]')).to.have.length(2);
     });
 
+    it('should error sensibly if any of the search props are undefined', () => {
+      const wrapper = mount((
+        <div>
+          <input type={undefined} />
+        </div>
+      ));
+
+      expect(() => wrapper.find({ type: undefined })).to.throw(
+        TypeError,
+        'Enzyme::Props can’t have `undefined` values. Try using ‘findWhere()’ instead.',
+      );
+    });
+
     it('should compound tag and prop selector', () => {
       const wrapper = mount(
         <div>
@@ -655,7 +668,6 @@ describeWithDOM('mount', () => {
       expect(wrapper.find({ a: 1 })).to.have.length(0);
       expect(wrapper.find({ 'data-test': 'ref' })).to.have.length(7);
       expect(wrapper.find({ className: 'foo' })).to.have.length(1);
-      expect(wrapper.find({ 'data-prop': undefined })).to.have.length(1);
       expect(wrapper.find({ 'data-prop': null })).to.have.length(1);
       expect(wrapper.find({ 'data-prop': 123 })).to.have.length(1);
       expect(wrapper.find({ 'data-prop': false })).to.have.length(1);

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

@@ -603,6 +603,19 @@ describe('shallow', () => {
       );
     });
 
+    it('should error sensibly if any of the search props are undefined', () => {
+      const wrapper = shallow(
+        <div>
+          <input type={undefined} />
+        </div>,
+      );
+
+      expect(() => wrapper.find({ type: undefined })).to.throw(
+        TypeError,
+        'Enzyme::Props can’t have `undefined` values. Try using ‘findWhere()’ instead.',
+      );
+    });
+
     it('should compound tag and prop selector', () => {
       const wrapper = shallow(
         <div>
@@ -695,7 +708,6 @@ describe('shallow', () => {
       expect(wrapper.find({ a: 1 })).to.have.length(0);
       expect(wrapper.find({ 'data-test': 'ref' })).to.have.length(7);
       expect(wrapper.find({ className: 'foo' })).to.have.length(1);
-      expect(wrapper.find({ prop: undefined })).to.have.length(1);
       expect(wrapper.find({ prop: null })).to.have.length(1);
       expect(wrapper.find({ prop: 123 })).to.have.length(1);
       expect(wrapper.find({ prop: false })).to.have.length(1);

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

@@ -48,6 +48,13 @@ describe('Utils', () => {
       )).to.equal(false);
     });
 
+    it('should skip undefined props', () => {
+      expect(nodeEqual(
+        <div id="foo" className={undefined} />,
+        <div id="foo" />,
+      )).to.equal(true);
+    });
+
     it('should check children as well', () => {
       expect(nodeEqual(
         <div>

packages/enzyme/package.json

@@ -38,6 +38,7 @@
     "object-is": "^1.0.1",
     "object.assign": "^4.0.4",
     "object.entries": "^1.0.4",
+    "object.values": "^1.0.4",
     "raf": "^3.3.2",
     "rst-selector-parser": "^2.2.1"
   },

packages/enzyme/src/RSTTraversal.js

@@ -1,4 +1,5 @@
 import flatten from 'lodash/flatten';
+import entries from 'object.entries';
 import isSubset from 'is-subset';
 import functionName from 'function.prototype.name';
 import { nodeHasProperty } from './Utils';
@@ -39,11 +40,11 @@ export function treeFilter(tree, fn) {
  * To support sibling selectors we need to be able to find
  * the siblings of a node. The easiest way to do that is find
  * the parent of the node and access its children.
- * 
+ *
  * This would be unneeded if the RST spec included sibling pointers
  * such as node.nextSibling and node.prevSibling
- * @param {*} root 
- * @param {*} targetNode 
+ * @param {*} root
+ * @param {*} targetNode
  */
 export function findParentNode(root, targetNode) {
   const results = treeFilter(
@@ -98,12 +99,21 @@ export function nodeHasId(node, id) {
 
 export { nodeHasProperty };
 
+const CAN_NEVER_MATCH = {};
+function replaceUndefined(v) {
+  return typeof v !== 'undefined' ? v : CAN_NEVER_MATCH;
+}
+function replaceUndefinedValues(obj) {
+  return entries(obj)
+    .reduce((acc, [k, v]) => ({ ...acc, [k]: replaceUndefined(v) }), {});
+}
+
 export function nodeMatchesObjectProps(node, props) {
-  return isSubset(propsOfNode(node), props);
+  return isSubset(propsOfNode(node), replaceUndefinedValues(props));
 }
 
 export function getTextFromNode(node) {
-  if (node === null || node === undefined) {
+  if (node == null) {
     return '';
   }