Merge pull request #4951 from spicyj/gh-4840

Improve traverseAllChildren object error message

src/addons/__tests__/ReactFragment-test.js

@@ -32,10 +32,10 @@ describe('ReactFragment', function() {
     var element = <div>{[children]}</div>;
     var container = document.createElement('div');
     expect(() => ReactDOM.render(element, container)).toThrow(
-      'Invariant Violation: Objects are not valid as a React child (found ' +
+      'Invariant Violation: Objects are not valid as a React child (found: ' +
       'object with keys {x, y, z}). If you meant to render a collection of ' +
       'children, use an array instead or wrap the object using ' +
-      'React.addons.createFragment(object).'
+      'createFragment(object) from the React add-ons.'
     );
   });
 
@@ -52,10 +52,11 @@ describe('ReactFragment', function() {
     }
     var container = document.createElement('div');
     expect(() => ReactDOM.render(<Foo />, container)).toThrow(
-      'Invariant Violation: Objects are not valid as a React child (found ' +
+      'Invariant Violation: Objects are not valid as a React child (found: ' +
       'object with keys {a, b, c}). If you meant to render a collection of ' +
       'children, use an array instead or wrap the object using ' +
-      'React.addons.createFragment(object). Check the render method of `Foo`.'
+      'createFragment(object) from the React add-ons. Check the render ' +
+      'method of `Foo`.'
     );
   });
 

src/shared/utils/__tests__/traverseAllChildren-test.js

@@ -476,4 +476,28 @@ describe('traverseAllChildren', function() {
     }
   });
 
+  it('should throw on object', function() {
+    expect(function() {
+      traverseAllChildren({a: 1, b: 2}, function() {}, null);
+    }).toThrow(
+      'Invariant Violation: Objects are not valid as a React child (found: ' +
+      'object with keys {a, b}). If you meant to render a collection of ' +
+      'children, use an array instead or wrap the object using ' +
+      'createFragment(object) from the React add-ons.'
+    );
+  });
+
+  it('should throw on regex', function() {
+    // Really, we care about dates (#4840) but those have nondeterministic
+    // serialization (timezones) so let's test a regex instead:
+    expect(function() {
+      traverseAllChildren(/abc/, function() {}, null);
+    }).toThrow(
+      'Invariant Violation: Objects are not valid as a React child (found: ' +
+      '/abc/). If you meant to render a collection of children, use an array ' +
+      'instead or wrap the object using createFragment(object) from the ' +
+      'React add-ons.'
+    );
+  });
+
 });

src/shared/utils/traverseAllChildren.js

@@ -188,13 +188,15 @@ function traverseAllChildrenImpl(
           }
         }
       }
+      var childrenString = String(children);
       invariant(
         false,
-        'Objects are not valid as a React child (found object with keys ' +
-        '{%s}). If you meant to render a collection of children, use an ' +
-        'array instead or wrap the object using ' +
-        'React.addons.createFragment(object).%s',
-        Object.keys(children).join(', '),
+        'Objects are not valid as a React child (found: %s). If you meant to ' +
+        'render a collection of children, use an array instead or wrap the ' +
+        'object using createFragment(object) from the React add-ons.%s',
+        childrenString === '[object Object]' ?
+          'object with keys {' + Object.keys(children).join(', ') + '}' :
+          childrenString,
         addendum
       );
     }