Allow empty strings as key props

enzymejs · Feb 11, 2018 · 8ffd0f1 · 8ffd0f1
1 parent 085e014
commit 8ffd0f1
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 25 deletions.
diff --git a/packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js b/packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js
@@ -12,6 +12,7 @@ import {
   createRenderWrapper,
   createMountWrapper,
   propsWithKeysAndRef,
+  ensureKeyOrUndefined,
 } from 'enzyme-adapter-utils';
 import mapNativeEventNames from './ReactThirteenMapNativeEventNames';
 import elementToTree from './ReactThirteenElementToTree';
@@ -75,7 +76,7 @@ function instanceToTree(inst) {
       nodeType: 'host',
       type: el.type,
       props: el._store.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance.getDOMNode(),
       rendered: values(children).map(instanceToTree),
@@ -86,7 +87,7 @@ function instanceToTree(inst) {
       nodeType: 'class',
       type: el.type,
       props: el._store.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: instanceToTree(inst._renderedComponent),
@@ -174,7 +175,7 @@ class ReactThirteenAdapter extends EnzymeAdapter {
           nodeType: 'class',
           type: cachedNode.type,
           props: cachedNode.props,
-          key: cachedNode.key || undefined,
+          key: ensureKeyOrUndefined(cachedNode.key),
           ref: cachedNode.ref,
           instance: renderer._instance._instance,
           rendered: elementToTree(output),

diff --git a/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js b/packages/enzyme-adapter-react-13/src/ReactThirteenElementToTree.js
@@ -1,4 +1,4 @@
-import { flatten, isArrayLike } from 'enzyme-adapter-utils';
+import { flatten, isArrayLike, ensureKeyOrUndefined } from 'enzyme-adapter-utils';
 
 export function nodeTypeFromType(type) {
   if (typeof type === 'string') {
@@ -35,7 +35,7 @@ export default function elementToTree(el) {
     nodeType: nodeTypeFromType(type),
     type,
     props,
-    key: key || undefined,
+    key: ensureKeyOrUndefined(key),
     ref,
     instance: null,
     rendered,

diff --git a/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js b/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js
@@ -15,6 +15,7 @@ import {
   createRenderWrapper,
   createMountWrapper,
   propsWithKeysAndRef,
+  ensureKeyOrUndefined,
 } from 'enzyme-adapter-utils';
 
 function typeToNodeType(type) {
@@ -47,7 +48,7 @@ function instanceToTree(inst) {
       nodeType: 'host',
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: ReactDOM.findDOMNode(inst.getPublicInstance()) || null,
       rendered: values(children).map(instanceToTree),
@@ -58,7 +59,7 @@ function instanceToTree(inst) {
       nodeType: typeToNodeType(el.type),
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || null,
       rendered: instanceToTree(inst._renderedComponent),
@@ -145,7 +146,7 @@ class ReactFifteenAdapter extends EnzymeAdapter {
           nodeType: typeToNodeType(cachedNode.type),
           type: cachedNode.type,
           props: cachedNode.props,
-          key: cachedNode.key || undefined,
+          key: ensureKeyOrUndefined(cachedNode.key),
           ref: cachedNode.ref,
           instance: renderer._instance._instance,
           rendered: elementToTree(output),

diff --git a/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js b/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js
@@ -15,6 +15,7 @@ import {
   createRenderWrapper,
   createMountWrapper,
   propsWithKeysAndRef,
+  ensureKeyOrUndefined,
 } from 'enzyme-adapter-utils';
 import ifReact from 'enzyme-adapter-react-helper/build/ifReact';
 
@@ -59,7 +60,7 @@ function instanceToTree(inst) {
       nodeType: nodeType(inst),
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: childrenFromInst(inst, el).map(instanceToTree),
@@ -70,7 +71,7 @@ function instanceToTree(inst) {
       nodeType: nodeType(inst),
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: childrenFromInst(inst, el).map(instanceToTree),
@@ -81,7 +82,7 @@ function instanceToTree(inst) {
       nodeType: nodeType(inst),
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: instanceToTree(inst._renderedComponent),
@@ -91,7 +92,7 @@ function instanceToTree(inst) {
     nodeType: nodeType(inst),
     type: el.type,
     props: el.props,
-    key: el.key || undefined,
+    key: ensureKeyOrUndefined(el.key),
     ref: el.ref,
     instance: inst._instance || null,
     rendered: childrenFromInst(inst, el).map(instanceToTree),
@@ -176,7 +177,7 @@ class ReactFifteenFourAdapter extends EnzymeAdapter {
           nodeType: compositeTypeToNodeType(renderer._instance._compositeType),
           type: cachedNode.type,
           props: cachedNode.props,
-          key: cachedNode.key || undefined,
+          key: ensureKeyOrUndefined(cachedNode.key),
           ref: cachedNode.ref,
           instance: renderer._instance._instance,
           rendered: elementToTree(output),

diff --git a/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js b/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js
@@ -17,6 +17,7 @@ import {
   createRenderWrapper,
   createMountWrapper,
   propsWithKeysAndRef,
+  ensureKeyOrUndefined,
 } from 'enzyme-adapter-utils';
 
 function compositeTypeToNodeType(type) {
@@ -59,7 +60,7 @@ function instanceToTree(inst) {
       nodeType: nodeType(inst),
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: values(inst._renderedChildren).map(instanceToTree),
@@ -70,7 +71,7 @@ function instanceToTree(inst) {
       nodeType: 'host',
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: childrenFromInst(inst, el).map(instanceToTree),
@@ -81,7 +82,7 @@ function instanceToTree(inst) {
       nodeType: nodeType(inst),
       type: el.type,
       props: el.props,
-      key: el.key || undefined,
+      key: ensureKeyOrUndefined(el.key),
       ref: el.ref,
       instance: inst._instance || inst._hostNode || null,
       rendered: instanceToTree(inst._renderedComponent),
@@ -91,7 +92,7 @@ function instanceToTree(inst) {
     nodeType: nodeType(inst),
     type: el.type,
     props: el.props,
-    key: el.key || undefined,
+    key: ensureKeyOrUndefined(el.key),
     ref: el.ref,
     instance: inst._instance || null,
     rendered: childrenFromInst(inst, el).map(instanceToTree),
@@ -176,7 +177,7 @@ class ReactFifteenAdapter extends EnzymeAdapter {
           nodeType: compositeTypeToNodeType(renderer._instance._compositeType),
           type: cachedNode.type,
           props: cachedNode.props,
-          key: cachedNode.key || undefined,
+          key: ensureKeyOrUndefined(cachedNode.key),
           ref: cachedNode.ref,
           instance: renderer._instance._instance,
           rendered: elementToTree(output),

diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -18,6 +18,7 @@ import {
   createRenderWrapper,
   createMountWrapper,
   propsWithKeysAndRef,
+  ensureKeyOrUndefined,
 } from 'enzyme-adapter-utils';
 import { findCurrentFiberUsingSlowPath } from 'react-reconciler/reflection';
 
@@ -76,7 +77,7 @@ function toTree(vnode) {
         nodeType: 'class',
         type: node.type,
         props: { ...node.memoizedProps },
-        key: node.key || undefined,
+        key: ensureKeyOrUndefined(node.key),
         ref: node.ref,
         instance: node.stateNode,
         rendered: childrenToTree(node.child),
@@ -88,7 +89,7 @@ function toTree(vnode) {
         nodeType: 'function',
         type: node.type,
         props: { ...node.memoizedProps },
-        key: node.key || undefined,
+        key: ensureKeyOrUndefined(node.key),
         ref: node.ref,
         instance: null,
         rendered: childrenToTree(node.child),
@@ -102,7 +103,7 @@ function toTree(vnode) {
         nodeType: 'host',
         type: node.type,
         props: { ...node.memoizedProps },
-        key: node.key || undefined,
+        key: ensureKeyOrUndefined(node.key),
         ref: node.ref,
         instance: node.stateNode,
         rendered: renderedNodes,
@@ -228,7 +229,7 @@ class ReactSixteenAdapter extends EnzymeAdapter {
           nodeType: nodeTypeFromType(cachedNode.type),
           type: cachedNode.type,
           props: cachedNode.props,
-          key: cachedNode.key || undefined,
+          key: ensureKeyOrUndefined(cachedNode.key),
           ref: cachedNode.ref,
           instance: renderer._instance,
           rendered: Array.isArray(output)

diff --git a/packages/enzyme-adapter-utils/src/Utils.js b/packages/enzyme-adapter-utils/src/Utils.js
@@ -153,6 +153,10 @@ export function flatten(arrs) {
   return flatArrs;
 }
 
+export function ensureKeyOrUndefined(key) {
+  return key || (key === '' ? '' : undefined);
+}
+
 export function elementToTree(el) {
   if (el === null || typeof el !== 'object' || !('type' in el)) {
     return el;
@@ -174,7 +178,7 @@ export function elementToTree(el) {
     nodeType: nodeTypeFromType(type),
     type,
     props,
-    key: key || undefined,
+    key: ensureKeyOrUndefined(key),
     ref,
     instance: null,
     rendered,

diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -3146,11 +3146,12 @@ describeWithDOM('mount', () => {
     it('should return the key of the node', () => {
       const wrapper = mount((
         <ul>
-          {['foo', 'bar'].map(s => <li key={s}>{s}</li>)}
+          {['foo', 'bar', ''].map(s => <li key={s}>{s}</li>)}
         </ul>
       )).find('li');
       expect(wrapper.at(0).key()).to.equal('foo');
       expect(wrapper.at(1).key()).to.equal('bar');
+      expect(wrapper.at(2).key()).to.equal('');
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -4007,11 +4007,12 @@ describe('shallow', () => {
     it('should return the key of the node', () => {
       const wrapper = shallow((
         <ul>
-          {['foo', 'bar'].map(s => <li key={s}>{s}</li>)}
+          {['foo', 'bar', ''].map(s => <li key={s}>{s}</li>)}
         </ul>
       )).find('li');
       expect(wrapper.at(0).key()).to.equal('foo');
       expect(wrapper.at(1).key()).to.equal('bar');
+      expect(wrapper.at(2).key()).to.equal('');
     });
   });