Added warning for mispelling of componentWillReceiveProps and updated tests
David Baker committed
Jun 5, 2015 at 23:49 UTC
2d8c4be000d55912e1604864ca70c6daa3c69944
6 files changed
+83
src/isomorphic/classic/class/ReactClass.js
+6
@@ -889,6 +889,12 @@ var ReactClass = {
889
'expected to return a value.',
890
spec.displayName || 'A component'
891
);
892
+ warning(
893
+ !Constructor.prototype.componentWillRecieveProps,
894
+ '%s has a method called ' +
895
+ 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
896
+ spec.displayName || 'A component'
897
+ );
898
}
899
900
// Reduce time spent doing lookups by setting these on the prototype.
src/isomorphic/classic/class/__tests__/ReactClass-test.js
+16
@@ -163,6 +163,22 @@ describe('ReactClass-spec', function() {
163
);
164
});
165
166
+ it('should warn when mispelling componentWillReceiveProps', function() {
167
+ React.createClass({
168
+ componentWillRecieveProps: function() {
169
+ return false;
170
+ },
171
+ render: function() {
172
+ return <div />;
173
+ },
174
+ });
175
+ expect(console.error.argsForCall.length).toBe(1);
176
+ expect(console.error.argsForCall[0][0]).toBe(
177
+ 'Warning: A component has a method called componentWillRecieveProps(). Did you ' +
178
+ 'mean componentWillReceiveProps()?'
179
+ );
180
+ });
181
+
182
it('should throw if a reserved property is in statics', function() {
183
expect(function() {
184
React.createClass({
src/isomorphic/modern/class/__tests__/ReactCoffeeScriptClass-test.coffee
+17
@@ -319,6 +319,23 @@ describe 'ReactCoffeeScriptClass', ->
319
question because the function is expected to return a value.'
320
)
321
322
+ it 'should warn when mispelling componentWillReceiveProps', ->
323
+ spyOn console, 'error'
324
+ class NamedComponent
325
+ componentWillRecieveProps: ->
326
+ false
327
+
328
+ render: ->
329
+ span
330
+ className: 'foo'
331
+
332
+ test React.createElement(NamedComponent), 'SPAN', 'foo'
333
+ expect(console.error.calls.length).toBe 1
334
+ expect(console.error.calls[0].args[0]).toBe(
335
+ 'Warning: NamedComponent has a method called componentWillRecieveProps().
336
+ Did you mean componentWillReceiveProps()?'
337
+ )
338
+
339
it 'should throw AND warn when trying to access classic APIs', ->
340
spyOn console, 'error'
341
instance =
src/isomorphic/modern/class/__tests__/ReactES6Class-test.js
+21
@@ -363,6 +363,27 @@ describe('ReactES6Class', function() {
363
);
364
});
365
366
+ it('should warn when mispelling componentWillReceiveProps', function() {
367
+ spyOn(console, 'error');
368
+
369
+ class NamedComponent {
370
+ componentWillRecieveProps() {
371
+ return false;
372
+ }
373
+ render() {
374
+ return <span className="foo" />;
375
+ }
376
+ }
377
+ test(<NamedComponent />, 'SPAN', 'foo');
378
+
379
+ expect(console.error.calls.length).toBe(1);
380
+ expect(console.error.calls[0].args[0]).toBe(
381
+ 'Warning: ' +
382
+ 'NamedComponent has a method called componentWillRecieveProps(). Did you ' +
383
+ 'mean componentWillReceiveProps()?'
384
+ );
385
+ });
386
+
387
it('should throw AND warn when trying to access classic APIs', function() {
388
spyOn(console, 'error');
389
var instance = test(<Inner name="foo" />, 'DIV', 'foo');
src/isomorphic/modern/class/__tests__/ReactTypeScriptClass-test.ts
+17
@@ -257,6 +257,9 @@ class NamedComponent {
257
componentShouldUpdate() {
258
return false;
259
}
260
+ componentWillRecieveProps() {
261
+ return false;
262
+ }
263
render() {
264
return React.createElement('span', {className: 'foo'});
265
}
@@ -451,6 +454,20 @@ describe('ReactTypeScriptClass', function() {
454
);
455
});
456
457
+ it('should warn when mispelling componentWillReceiveProps', function() {
458
+ var warn = jest.genMockFn();
459
+ console.error = warn;
460
+
461
+ test(React.createElement(NamedComponent), 'SPAN', 'foo');
462
+
463
+ expect(warn.mock.calls.length).toBe(1);
464
+ expect(warn.mock.calls[0][0]).toBe(
465
+ 'Warning: ' +
466
+ 'NamedComponent has a method called componentWillRecieveProps(). Did you ' +
467
+ 'mean componentWillReceiveProps()?'
468
+ );
469
+ });
470
+
471
it('should throw AND warn when trying to access classic APIs', function() {
472
var warn = jest.genMockFn();
473
console.error = warn;
src/renderers/shared/reconciler/ReactCompositeComponent.js
+6
@@ -197,6 +197,12 @@ var ReactCompositeComponentMixin = {
197
'expected to return a value.',
198
(this.getName() || 'A component')
199
);
200
+ warning(
201
+ typeof inst.componentWillRecieveProps !== 'function',
202
+ '%s has a method called ' +
203
+ 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
204
+ (this.getName() || 'A component')
205
+ );
206
}
207
208
var initialState = inst.state;