Fix no-unused-prop-types to ignore validation when spread is used (fixes #840)

Author: yannickcr

lib/rules/no-unused-prop-types.js

@@ -605,6 +605,7 @@ module.exports = {
 
       var component = components.get(utils.getParentComponent());
       var usedPropTypes = component && component.usedPropTypes || [];
+      var ignorePropsValidation = component && component.ignorePropsValidation || false;
 
       switch (type) {
         case 'direct':
@@ -621,7 +622,8 @@ module.exports = {
         case 'destructuring':
           for (var k = 0, l = (properties || []).length; k < l; k++) {
             if (hasSpreadOperator(properties[k]) || properties[k].computed) {
-              continue;
+              ignorePropsValidation = true;
+              break;
             }
             var propName = getKeyValue(properties[k]);
 
@@ -646,7 +648,8 @@ module.exports = {
       }
 
       components.set(node, {
-        usedPropTypes: usedPropTypes
+        usedPropTypes: usedPropTypes,
+        ignorePropsValidation: ignorePropsValidation
       });
     }
 
@@ -658,7 +661,7 @@ module.exports = {
     function markPropTypesAsDeclared(node, propTypes) {
       var component = components.get(node);
       var declaredPropTypes = component && component.declaredPropTypes || [];
-      var ignorePropsValidation = false;
+      var ignorePropsValidation = component && component.ignorePropsValidation || false;
 
       switch (propTypes && propTypes.type) {
         case 'ObjectTypeAnnotation':
@@ -936,4 +939,3 @@ module.exports = {
     };
   })
 };
-

tests/lib/rules/no-unused-prop-types.js

@@ -177,15 +177,19 @@ ruleTester.run('no-unused-prop-types', rule, {
       ].join('\n'),
       parserOptions: parserOptions
     }, {
+      // Props validation is ignored when spread is used
       code: [
         'class Hello extends React.Component {',
         '  render() {',
-        '    var { firstname, ...other } = this.props;',
+        '    var { firstname, ...props } = this.props;',
+        '    var { category, icon } = props;',
         '    return <div>Hello {firstname}</div>;',
         '  }',
         '}',
         'Hello.propTypes = {',
-        '  firstname: React.PropTypes.string',
+        '  firstname: React.PropTypes.string,',
+        '  category: React.PropTypes.string,',
+        '  icon: React.PropTypes.bool',
         '};'
       ].join('\n'),
       parser: 'babel-eslint',
@@ -1653,25 +1657,6 @@ ruleTester.run('no-unused-prop-types', rule, {
         {message: '\'a.unused\' PropType is defined but prop is never used'},
         {message: '\'a.anotherunused\' PropType is defined but prop is never used'}
       ]
-    }, {
-      code: [
-        'class Hello extends React.Component {',
-        '  render() {',
-        '    var { ',
-        '      "aria-controls": ariaControls, ',
-        '      propX,',
-        '      ...props } = this.props;',
-        '    return <div>Hello</div>;',
-        '  }',
-        '}',
-        'Hello.propTypes = {',
-        '  "aria-unused": React.PropTypes.string',
-        '};'
-      ].join('\n'),
-      parser: 'babel-eslint',
-      errors: [
-        {message: '\'aria-unused\' PropType is defined but prop is never used'}
-      ]
     }, {
       code: [
         'class Hello extends React.Component {',