Improve traverseAllChildren object error message
Fixes #4840.
Ben Alpert committed
Sep 23, 2015 at 11:25 UTC
1922db1711b24028b3c794f212d0452eb4e95b09
3 files changed
+36
-9
src/addons/__tests__/ReactFragment-test.js
+5
-4
@@ -32,10 +32,10 @@ describe('ReactFragment', function() {
32
var element = <div>{[children]}</div>;
33
var container = document.createElement('div');
34
expect(() => ReactDOM.render(element, container)).toThrow(
35
- 'Invariant Violation: Objects are not valid as a React child (found ' +
35
+ 'Invariant Violation: Objects are not valid as a React child (found: ' +
36
'object with keys {x, y, z}). If you meant to render a collection of ' +
37
'children, use an array instead or wrap the object using ' +
38
- 'React.addons.createFragment(object).'
38
+ 'createFragment(object) from the React add-ons.'
39
);
40
});
41
@@ -52,10 +52,11 @@ describe('ReactFragment', function() {
52
}
53
var container = document.createElement('div');
54
expect(() => ReactDOM.render(<Foo />, container)).toThrow(
55
- 'Invariant Violation: Objects are not valid as a React child (found ' +
55
+ 'Invariant Violation: Objects are not valid as a React child (found: ' +
56
'object with keys {a, b, c}). If you meant to render a collection of ' +
57
'children, use an array instead or wrap the object using ' +
58
- 'React.addons.createFragment(object). Check the render method of `Foo`.'
58
+ 'createFragment(object) from the React add-ons. Check the render ' +
59
+ 'method of `Foo`.'
60
);
61
});
62
src/shared/utils/__tests__/traverseAllChildren-test.js
+24
@@ -476,4 +476,28 @@ describe('traverseAllChildren', function() {
476
}
477
});
478
479
+ it('should throw on object', function() {
480
+ expect(function() {
481
+ traverseAllChildren({a: 1, b: 2}, function() {}, null);
482
+ }).toThrow(
483
+ 'Invariant Violation: Objects are not valid as a React child (found: ' +
484
+ 'object with keys {a, b}). If you meant to render a collection of ' +
485
+ 'children, use an array instead or wrap the object using ' +
486
+ 'createFragment(object) from the React add-ons.'
487
+ );
488
+ });
489
+
490
+ it('should throw on regex', function() {
491
+ // Really, we care about dates (#4840) but those have nondeterministic
492
+ // serialization (timezones) so let's test a regex instead:
493
+ expect(function() {
494
+ traverseAllChildren(/abc/, function() {}, null);
495
+ }).toThrow(
496
+ 'Invariant Violation: Objects are not valid as a React child (found: ' +
497
+ '/abc/). If you meant to render a collection of children, use an array ' +
498
+ 'instead or wrap the object using createFragment(object) from the ' +
499
+ 'React add-ons.'
500
+ );
501
+ });
502
+
503
});
src/shared/utils/traverseAllChildren.js
+7
-5
@@ -188,13 +188,15 @@ function traverseAllChildrenImpl(
188
}
189
}
190
}
191
+ var childrenString = String(children);
192
invariant(
193
false,
193
- 'Objects are not valid as a React child (found object with keys ' +
194
- '{%s}). If you meant to render a collection of children, use an ' +
195
- 'array instead or wrap the object using ' +
196
- 'React.addons.createFragment(object).%s',
197
- Object.keys(children).join(', '),
194
+ 'Objects are not valid as a React child (found: %s). If you meant to ' +
195
+ 'render a collection of children, use an array instead or wrap the ' +
196
+ 'object using createFragment(object) from the React add-ons.%s',
197
+ childrenString === '[object Object]' ?
198
+ 'object with keys {' + Object.keys(children).join(', ') + '}' :
199
+ childrenString,
200
addendum
201
);
202
}