Issue#11510: added verification check for misspelled propTypes (#11524)
* added verification check for misspelled propTypes * added flag to check if misspelled warning was shown to developer before * added the condition to else if and improved the warning message * moved variable under dev section & initialized it to false * added test to confirm the missmatch prop type warning in both and tests files * removed eslint disable and split error into 2 lines * changed expectDev to expect in tests * added __DEV__ condition before both tests
Zubair Ahmed committed
Nov 24, 2017 at 08:29 UTC
7d27851bf4aa8129276614b62edf9ade4aaa4cbd
3 files changed
+57
-1
packages/react/src/ReactElementValidator.js
+12
-1
@@ -26,6 +26,8 @@ import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
26
if (__DEV__) {
27
var currentlyValidatingElement = null;
28
29
+ var propTypesMisspellWarningShown = false;
30
+
31
var getDisplayName = function(element): string {
32
if (element == null) {
33
return '#empty';
@@ -212,11 +214,20 @@ function validatePropTypes(element) {
214
}
215
var name = componentClass.displayName || componentClass.name;
216
var propTypes = componentClass.propTypes;
215
-
217
if (propTypes) {
218
currentlyValidatingElement = element;
219
checkPropTypes(propTypes, element.props, 'prop', name, getStackAddendum);
220
currentlyValidatingElement = null;
221
+ } else if (
222
+ componentClass.PropTypes !== undefined &&
223
+ !propTypesMisspellWarningShown
224
+ ) {
225
+ propTypesMisspellWarningShown = true;
226
+ warning(
227
+ false,
228
+ 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
229
+ name || 'Unknown',
230
+ );
231
}
232
if (typeof componentClass.getDefaultProps === 'function') {
233
warning(
packages/react/src/__tests__/ReactElementValidator-test.js
+23
@@ -448,6 +448,29 @@ describe('ReactElementValidator', () => {
448
}
449
});
450
451
+ it('should warn if component declares PropTypes instead of propTypes', () => {
452
+ spyOn(console, 'error');
453
+ class MisspelledPropTypesComponent extends React.Component {
454
+ static PropTypes = {
455
+ prop: PropTypes.string,
456
+ };
457
+ render() {
458
+ return React.createElement('span', null, this.props.prop);
459
+ }
460
+ }
461
+
462
+ ReactTestUtils.renderIntoDocument(
463
+ React.createElement(MisspelledPropTypesComponent, {prop: 'Hi'}),
464
+ );
465
+ if (__DEV__) {
466
+ expect(console.error.calls.count()).toBe(1);
467
+ expect(console.error.calls.argsFor(0)[0]).toBe(
468
+ 'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
469
+ 'instead of `propTypes`. Did you misspell the property assignment?',
470
+ );
471
+ }
472
+ });
473
+
474
it('should warn when accessing .type on an element factory', () => {
475
spyOnDev(console, 'warn');
476
function TestComponent() {
packages/react/src/__tests__/ReactJSXElementValidator-test.js
+22
@@ -402,4 +402,26 @@ describe('ReactJSXElementValidator', () => {
402
);
403
}
404
});
405
+
406
+ it('should warn if component declares PropTypes instead of propTypes', () => {
407
+ spyOn(console, 'error');
408
+ class MisspelledPropTypesComponent extends React.Component {
409
+ render() {
410
+ return <span>{this.props.prop}</span>;
411
+ }
412
+ }
413
+ MisspelledPropTypesComponent.PropTypes = {
414
+ prop: PropTypes.string,
415
+ };
416
+ ReactTestUtils.renderIntoDocument(
417
+ <MisspelledPropTypesComponent prop="hi" />,
418
+ );
419
+ if (__DEV__) {
420
+ expect(console.error.calls.count()).toBe(1);
421
+ expect(console.error.calls.argsFor(0)[0]).toBe(
422
+ 'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
423
+ 'instead of `propTypes`. Did you misspell the property assignment?',
424
+ );
425
+ }
426
+ });
427
});