fix: Fix wrong detection of forwardRef in combination with memo (#592)

Co-authored-by: Daniel Tschinder <[email protected]>

src/__tests__/__snapshots__/main-test.js.snap

@@ -1595,3 +1595,19 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_42.js" without errors 1`] = `
+Object {
+  "description": "",
+  "methods": Array [],
+  "props": Object {
+    "foo": Object {
+      "defaultValue": Object {
+        "computed": false,
+        "value": "'bar'",
+      },
+      "required": false,
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_42.js

@@ -0,0 +1,3 @@
+import React, {memo, forwardRef} from 'react';
+
+export default memo(forwardRef(({ foo = 'bar' }, ref) => <div ref={ref}>{foo}</div>));

src/handlers/__tests__/componentDocblockHandler-test.js

@@ -245,6 +245,13 @@ describe('componentDocblockHandler', () => {
       );
     });
 
+    describe('inline implementation with memo', () => {
+      test(`
+        React.memo(React.forwardRef((props, ref) => {}));
+        import React from "react";`, src =>
+        beforeLastStatement(src).get('expression'));
+    });
+
     describe('out of line implementation', () => {
       test(
         [

src/handlers/defaultPropsHandler.js

@@ -49,11 +49,11 @@ function getDefaultValue(path: NodePath) {
 }
 
 function getStatelessPropsPath(componentDefinition): NodePath {
-  const value = resolveToValue(componentDefinition);
+  let value = resolveToValue(componentDefinition);
   if (isReactForwardRefCall(value)) {
-    const inner = resolveToValue(value.get('arguments', 0));
-    return inner.get('params', 0);
+    value = resolveToValue(value.get('arguments', 0));
   }
+
   return value.get('params', 0);
 }
 

src/utils/__tests__/isReactForwardRefCall-test.js

@@ -78,6 +78,14 @@ describe('isReactForwardRefCall', () => {
       expect(isReactForwardRefCall(def)).toBe(true);
     });
 
+    it('does not accept forwardRef if not outer call', () => {
+      const def = parsePath(`
+        import { forwardRef, memo } from "react";
+        memo(forwardRef({}));
+      `);
+      expect(isReactForwardRefCall(def)).toBe(false);
+    });
+
     it('accepts forwardRef called on imported aliased value', () => {
       const def = parsePath(`
         import { forwardRef as foo } from "react";

src/utils/isReactBuiltinCall.js

@@ -42,10 +42,13 @@ export default function isReactBuiltinCall(
       // `import { createElement } from 'react'`
       (t.ImportDeclaration.check(value.node) &&
         value.node.specifiers.some(
-          specifier => specifier.imported && specifier.imported.name === name,
+          specifier =>
+            specifier.imported?.name === name &&
+            specifier.local?.name === path.node.callee.name,
         ))
     ) {
       const module = resolveToModule(value);
+
       return Boolean(module && isReactModuleName(module));
     }
   }

src/utils/isReactCreateClassCall.js

@@ -8,7 +8,6 @@
  */
 
 import { namedTypes as t } from 'ast-types';
-import match from './match';
 import resolveToModule from './resolveToModule';
 import isReactBuiltinCall from './isReactBuiltinCall';
 
@@ -24,7 +23,7 @@ function isReactCreateClassCallModular(path: NodePath): boolean {
     path = path.get('expression');
   }
 
-  if (!match(path.node, { type: 'CallExpression' })) {
+  if (!t.CallExpression.check(path.node)) {
     return false;
   }
   const module = resolveToModule(path);