fix: extract display name correctly even if components are wrapped (#277)

This happens when for example using React.forwardRef()

Author: danez

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

@@ -613,3 +613,21 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_14.js" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "UncoloredView",
+  "methods": Array [],
+  "props": Object {
+    "color": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "string",
+        "nullable": true,
+      },
+      "required": false,
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_14.js

@@ -0,0 +1,11 @@
+type Props = $ReadOnly<{|
+  color?: ?string,
+|}>;
+
+const ColoredView = React.forwardRef((props: Props, ref) => (
+  <View style={{backgroundColor: props.color}} />
+));
+
+ColoredView.displayName = 'UncoloredView';
+
+module.exports = ColoredView;

src/handlers/__tests__/displayNameHandler-test.js

@@ -174,6 +174,18 @@ describe('defaultPropsHandler', () => {
       expect(documentation.displayName).toBe('Foo');
     });
 
+    it('considers the variable name even if wrapped', () => {
+      const definition = statement('var Foo = React.forwardRef(() => {});').get(
+        'declarations',
+        0,
+        'init',
+        'arguments',
+        0,
+      );
+      expect(() => displayNameHandler(documentation, definition)).not.toThrow();
+      expect(documentation.displayName).toBe('Foo');
+    });
+
     it('considers the variable name on assign', () => {
       const definition = statement('Foo = () => {};').get(
         'expression',
@@ -183,6 +195,17 @@ describe('defaultPropsHandler', () => {
       expect(documentation.displayName).toBe('Foo');
     });
 
+    it('considers the variable name on assign even if wrapped', () => {
+      const definition = statement('Foo = React.forwardRef(() => {});').get(
+        'expression',
+        'right',
+        'arguments',
+        0,
+      );
+      expect(() => displayNameHandler(documentation, definition)).not.toThrow();
+      expect(documentation.displayName).toBe('Foo');
+    });
+
     it('considers a static displayName object property over variable name', () => {
       const definition = statement(`
         var Foo = () => {};
@@ -191,5 +214,14 @@ describe('defaultPropsHandler', () => {
       expect(() => displayNameHandler(documentation, definition)).not.toThrow();
       expect(documentation.displayName).toBe('Bar');
     });
+
+    it('considers a static displayName object property over variable name even if wrapped', () => {
+      const definition = statement(`
+        var Foo = React.forwardRef(() => {});
+        Foo.displayName = 'Bar';
+      `);
+      expect(() => displayNameHandler(documentation, definition)).not.toThrow();
+      expect(documentation.displayName).toBe('Bar');
+    });
   });
 });

src/handlers/displayNameHandler.js

@@ -39,16 +39,22 @@ export default function displayNameHandler(
       types.ArrowFunctionExpression.check(path.node) ||
       types.FunctionExpression.check(path.node)
     ) {
-      if (types.VariableDeclarator.check(path.parentPath.node)) {
-        documentation.set(
-          'displayName',
-          getNameOrValue(path.parentPath.get('id')),
-        );
-      } else if (types.AssignmentExpression.check(path.parentPath.node)) {
-        documentation.set(
-          'displayName',
-          getNameOrValue(path.parentPath.get('left')),
-        );
+      let currentPath = path;
+      while (currentPath.parent) {
+        if (types.VariableDeclarator.check(currentPath.parent.node)) {
+          documentation.set(
+            'displayName',
+            getNameOrValue(currentPath.parent.get('id')),
+          );
+          return;
+        } else if (types.AssignmentExpression.check(currentPath.parent.node)) {
+          documentation.set(
+            'displayName',
+            getNameOrValue(currentPath.parent.get('left')),
+          );
+          return;
+        }
+        currentPath = currentPath.parent;
       }
     }
     return;

src/utils/getMemberExpressionValuePath.js

@@ -42,11 +42,16 @@ function resolveName(path) {
     types.ArrowFunctionExpression.check(path.node) ||
     types.TaggedTemplateExpression.check(path.node)
   ) {
-    if (!types.VariableDeclarator.check(path.parent.node)) {
-      return;
+    let currentPath = path;
+    while (currentPath.parent) {
+      if (types.VariableDeclarator.check(currentPath.parent.node)) {
+        return currentPath.parent.get('id', 'name').value;
+      }
+
+      currentPath = currentPath.parent;
     }
 
-    return path.parent.get('id', 'name').value;
+    return;
   }
 
   throw new TypeError(