Fix component detection when memo and forwardRef are used together

Fixes #2349
jsx-eslint · Jul 22, 2019 · 98d4bf3 · 98d4bf3
1 parent fc70077
commit 98d4bf3
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 3 deletions.
diff --git a/lib/util/Components.js b/lib/util/Components.js
@@ -422,8 +422,23 @@ function componentRule(rule, context) {
       return utils.isReturningJSX(ASTNode, strict) || utils.isReturningNull(ASTNode);
     },
 
+    getPragmaComponentWrapper(node) {
+      let isPragmaComponentWrapper;
+      let currentNode = node;
+      let prevNode;
+      do {
+        currentNode = currentNode.parent;
+        isPragmaComponentWrapper = this.isPragmaComponentWrapper(currentNode);
+        if (isPragmaComponentWrapper) {
+          prevNode = currentNode;
+        }
+      } while (isPragmaComponentWrapper);
+
+      return prevNode;
+    },
+
     isPragmaComponentWrapper(node) {
-      if (node.type !== 'CallExpression') {
+      if (!node || node.type !== 'CallExpression') {
         return false;
       }
       const propertyNames = ['forwardRef', 'memo'];
@@ -506,8 +521,9 @@ function componentRule(rule, context) {
         const isArgument = node.parent && node.parent.type === 'CallExpression'; // Arguments (callback, etc.)
         // Attribute Expressions inside JSX Elements (<button onClick={() => props.handleClick()}></button>)
         const isJSXExpressionContainer = node.parent && node.parent.type === 'JSXExpressionContainer';
-        if (isFunction && node.parent && this.isPragmaComponentWrapper(node.parent)) {
-          return node.parent;
+        const pragmaComponentWrapper = this.getPragmaComponentWrapper(node);
+        if (isFunction && pragmaComponentWrapper) {
+          return pragmaComponentWrapper;
         }
         // Stop moving up if we reach a class or an argument (like a callback)
         if (isClass || isArgument) {

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -2375,6 +2375,43 @@ ruleTester.run('prop-types', rule, {
         }
       `,
       parser: parsers.BABEL_ESLINT
+    },
+    {
+      code: `
+        const Label = React.memo(React.forwardRef(({ text }, ref) => {
+          return <div ref={ref}>{text}</div>;
+        }));
+        Label.propTypes = {
+          text: PropTypes.string
+        };
+      `
+    },
+    {
+      code: `
+        import React, { memo, forwardRef } from 'react';
+        const Label = memo(forwardRef(({ text }, ref) => {
+          return <div ref={ref}>{text}</div>;
+        }));
+        Label.propTypes = {
+          text: PropTypes.string
+        };
+      `
+    },
+    {
+      code: `
+        import Foo, { memo, forwardRef } from 'foo';
+        const Label = memo(forwardRef(({ text }, ref) => {
+          return <div ref={ref}>{text}</div>;
+        }));
+        Label.propTypes = {
+          text: PropTypes.string
+        };
+      `,
+      settings: {
+        react: {
+          pragma: 'Foo'
+        }
+      }
     }
   ],
 
@@ -4723,6 +4760,43 @@ ruleTester.run('prop-types', rule, {
       errors: [{
         message: '\'user.age\' is missing in props validation'
       }]
+    },
+    {
+      code: `
+        const Label = React.memo(React.forwardRef(({ text }, ref) => {
+          return <div ref={ref}>{text}</div>;
+        }));
+      `,
+      errors: [{
+        message: '\'text\' is missing in props validation'
+      }]
+    },
+    {
+      code: `
+        import React, { memo, forwardRef } from 'react';
+        const Label = memo(forwardRef(({ text }, ref) => {
+          return <div ref={ref}>{text}</div>;
+        }));
+      `,
+      errors: [{
+        message: '\'text\' is missing in props validation'
+      }]
+    },
+    {
+      code: `
+        import Foo, { memo, forwardRef } from 'foo';
+        const Label = memo(forwardRef(({ text }, ref) => {
+          return <div ref={ref}>{text}</div>;
+        }));
+      `,
+      settings: {
+        react: {
+          pragma: 'Foo'
+        }
+      },
+      errors: [{
+        message: '\'text\' is missing in props validation'
+      }]
     }
   ]
 });