Better error for invalid element when shallow rendering
Fixes #4721, fixes #4730.
Ben Alpert committed
Aug 28, 2015 at 18:20 UTC
f4d7feb8bef64cc616d5f55b0d5c4bc81e585ad0
2 files changed
+37
src/test/ReactTestUtils.js
+16
@@ -396,6 +396,22 @@ assign(
396
);
397
398
ReactShallowRenderer.prototype.render = function(element, context) {
399
+ invariant(
400
+ ReactElement.isValidElement(element),
401
+ 'ReactShallowRenderer render(): Invalid component element.%s',
402
+ typeof element === 'function' ?
403
+ ' Instead of passing a component class, make sure to instantiate ' +
404
+ 'it by passing it to React.createElement.' :
405
+ ''
406
+ );
407
+ invariant(
408
+ typeof element.type !== 'string',
409
+ 'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
410
+ 'components, not primitives (%s). Instead of calling `.render(el)` and ' +
411
+ 'inspecting the rendered output, look at `el.props` directly instead.',
412
+ element.type
413
+ );
414
+
415
if (!context) {
416
context = emptyObject;
417
}
src/test/__tests__/ReactTestUtils-test.js
+21
@@ -53,6 +53,27 @@ describe('ReactTestUtils', function() {
53
]);
54
});
55
56
+ it('should throw for invalid elements', function() {
57
+ var SomeComponent = React.createClass({
58
+ render: function() {
59
+ return <div />;
60
+ },
61
+ });
62
+
63
+ var shallowRenderer = ReactTestUtils.createRenderer();
64
+ expect(() => shallowRenderer.render(SomeComponent)).toThrow(
65
+ 'Invariant Violation: ReactShallowRenderer render(): Invalid component ' +
66
+ 'element. Instead of passing a component class, make sure to ' +
67
+ 'instantiate it by passing it to React.createElement.'
68
+ );
69
+ expect(() => shallowRenderer.render(<div />)).toThrow(
70
+ 'Invariant Violation: ReactShallowRenderer render(): Shallow rendering ' +
71
+ 'works only with custom components, not primitives (div). Instead of ' +
72
+ 'calling `.render(el)` and inspecting the rendered output, look at ' +
73
+ '`el.props` directly instead.'
74
+ );
75
+ });
76
+
77
it('should have shallow unmounting', function() {
78
var componentWillUnmount = mocks.getMockFunction();
79