Add warning when using non-component element types
This should make debugging easier for people who missed callsites when fixing up their JSX/non-JSX usage.
Ben Alpert committed
Mar 5, 2015 at 15:21 UTC
6b7e4dc8e89e8e67794e8b52de1314cb82e7267d
2 files changed
+27
src/core/ReactCompositeComponent.js
+14
@@ -133,6 +133,20 @@ var ReactCompositeComponentMixin = {
133
134
// Initialize the public class
135
var inst = new Component(publicProps, publicContext);
136
+
137
+ if (__DEV__) {
138
+ // This will throw later in _renderValidatedComponent, but add an early
139
+ // warning now to help debugging
140
+ warning(
141
+ inst.render != null,
142
+ '%s(...): No `render` method found on the returned component ' +
143
+ 'instance: you may have forgotten to define `render` in your ' +
144
+ 'component or you may have accidentally tried to render an element ' +
145
+ 'whose type is a function that isn\'t a React component.',
146
+ Component.displayName || Component.name || 'Component'
147
+ );
148
+ }
149
+
150
// These should be set up in the constructor, but as a convenience for
151
// simpler class abstractions, we set them up after the fact.
152
inst.props = publicProps;
src/core/__tests__/ReactCompositeComponent-test.js
+13
@@ -954,4 +954,17 @@ describe('ReactCompositeComponent', function() {
954
expect(a).toBe(b);
955
});
956
957
+ it('should warn when using non-React functions in JSX', function() {
958
+ function NotAComponent() {
959
+ return [<div />, <div />];
960
+ }
961
+ expect(function() {
962
+ ReactTestUtils.renderIntoDocument(<div><NotAComponent /></div>);
963
+ }).toThrow(); // has no method 'render'
964
+ expect(console.warn.calls.length).toBe(1);
965
+ expect(console.warn.calls[0].args[0]).toContain(
966
+ 'NotAComponent(...): No `render` method found'
967
+ );
968
+ });
969
+
970
});