Fix props validation for nested stateless components (fixes #331)

Author: yannickcr

lib/rules/prop-types.js

@@ -153,15 +153,23 @@ module.exports = Components.detect(function(context, components, utils) {
 
   /**
    * Checks if the prop is declared
-   * @param {Object} component The component to process
+   * @param {ASTNode} node The AST node being checked.
    * @param {String[]} names List of names of the prop to check.
    * @returns {Boolean} True if the prop is declared, false if not.
    */
-  function isDeclaredInComponent(component, names) {
-    return _isDeclaredInComponent(
-      component.declaredPropTypes || {},
-      names
-    );
+  function isDeclaredInComponent(node, names) {
+    while (node) {
+      var component = components.get(node);
+      var isDeclared =
+        component && component.confidence === 2 &&
+        _isDeclaredInComponent(component.declaredPropTypes || {}, names)
+      ;
+      if (isDeclared) {
+        return true;
+      }
+      node = node.parent;
+    }
+    return false;
   }
 
   /**
@@ -532,7 +540,7 @@ module.exports = Components.detect(function(context, components, utils) {
       allNames = component.usedPropTypes[i].allNames;
       if (
         isIgnored(allNames[0]) ||
-        isDeclaredInComponent(component, allNames)
+        isDeclaredInComponent(component.node, allNames)
       ) {
         continue;
       }

tests/lib/rules/prop-types.js

@@ -935,6 +935,24 @@ ruleTester.run('prop-types', rule, {
         jsx: true,
         experimentalObjectRestSpread: true
       }
+    }, {
+      code: [
+        'const statelessComponent = (props) => {',
+        '  const subRender = () => {',
+        '    return <span>{props.someProp}</span>;',
+        '  };',
+        '  return <div>{subRender()}</div>;',
+        '};',
+        'statelessComponent.propTypes = {',
+        '  someProp: PropTypes.string',
+        '};'
+      ].join('\n'),
+      env: {
+        es6: true
+      },
+      ecmaFeatures: {
+        jsx: true
+      }
     }
   ],