Add tests for getTypeFromReactComponent and remove unnecessary resolveToValue call

Author: danez

.changeset/lazy-walls-swim.md

@@ -0,0 +1,6 @@
+---
+'react-docgen': patch
+---
+
+Remove unnecessary call to `resolveToValue` when trying to find props type from
+react components.

packages/react-docgen/src/utils/__tests__/__snapshots__/getTypeFromReactComponent-test.ts.snap

@@ -0,0 +1,79 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getTypeFromReactComponent > Flow > classes > finds props type in new params 1`] = `
+Node {
+  "id": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+  "type": "GenericTypeAnnotation",
+  "typeParameters": null,
+}
+`;
+
+exports[`getTypeFromReactComponent > Flow > classes > finds props type in old params 1`] = `
+Node {
+  "id": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+  "type": "GenericTypeAnnotation",
+  "typeParameters": null,
+}
+`;
+
+exports[`getTypeFromReactComponent > Flow > classes > finds props type in properties 1`] = `
+Node {
+  "id": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+  "type": "GenericTypeAnnotation",
+  "typeParameters": null,
+}
+`;
+
+exports[`getTypeFromReactComponent > Flow > stateless > finds param type annotation 1`] = `
+Node {
+  "id": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+  "type": "GenericTypeAnnotation",
+  "typeParameters": null,
+}
+`;
+
+exports[`getTypeFromReactComponent > TypeScript > classes > finds props type in params 1`] = `
+Node {
+  "type": "TSTypeReference",
+  "typeName": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+}
+`;
+
+exports[`getTypeFromReactComponent > TypeScript > classes > finds props type in properties 1`] = `
+Node {
+  "type": "TSTypeReference",
+  "typeName": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+}
+`;
+
+exports[`getTypeFromReactComponent > TypeScript > stateless > finds param type annotation 1`] = `
+Node {
+  "type": "TSTypeReference",
+  "typeName": Node {
+    "name": "Props",
+    "type": "Identifier",
+  },
+}
+`;
+
+exports[`getTypeFromReactComponent > handles no class props 1`] = `null`;
+
+exports[`getTypeFromReactComponent > handles no stateless props 1`] = `null`;

packages/react-docgen/src/utils/__tests__/getTypeFromReactComponent-test.ts

@@ -0,0 +1,118 @@
+import type {
+  ArrowFunctionExpression,
+  ClassDeclaration,
+  VariableDeclaration,
+} from '@babel/types';
+import { parse, parseTypescript } from '../../../tests/utils';
+import getTypeFromReactComponent from '../getTypeFromReactComponent.js';
+import { describe, expect, test } from 'vitest';
+import type { NodePath } from '@babel/traverse';
+
+describe('getTypeFromReactComponent', () => {
+  test('handles no stateless props', () => {
+    const path = parseTypescript
+      .statementLast<VariableDeclaration>(`const x = () => {}`)
+      .get('declarations')[0]
+      .get('init') as NodePath<ArrowFunctionExpression>;
+
+    expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+  });
+
+  test('handles no class props', () => {
+    const path = parseTypescript.statementLast<ClassDeclaration>(
+      `import React from 'react';
+       class X extends React.Component {
+         render() {}
+       }`,
+    );
+
+    expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+  });
+
+  describe('TypeScript', () => {
+    describe('stateless', () => {
+      test('finds param type annotation', () => {
+        const path = parseTypescript
+          .statementLast<VariableDeclaration>(`const x = (props: Props) => {}`)
+          .get('declarations')[0]
+          .get('init') as NodePath<ArrowFunctionExpression>;
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+    });
+
+    describe('classes', () => {
+      test('finds props type in params', () => {
+        const path = parseTypescript.statementLast<ClassDeclaration>(
+          `import React from 'react';
+             class X extends React.Component<Props, State> {
+               render() {}
+             }`,
+        );
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+
+      test('finds props type in properties', () => {
+        const path = parseTypescript.statementLast<ClassDeclaration>(
+          `import React from 'react';
+           class X extends React.Component {
+             props: Props;
+             render() {}
+           }`,
+        );
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('Flow', () => {
+    describe('stateless', () => {
+      test('finds param type annotation', () => {
+        const path = parse
+          .statementLast<VariableDeclaration>(`const x = (props: Props) => {}`)
+          .get('declarations')[0]
+          .get('init') as NodePath<ArrowFunctionExpression>;
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+    });
+
+    describe('classes', () => {
+      test('finds props type in new params', () => {
+        const path = parse.statementLast<ClassDeclaration>(
+          `import React from 'react';
+             class X extends React.Component<Props, State> {
+               render() {}
+             }`,
+        );
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+
+      test('finds props type in old params', () => {
+        const path = parse.statementLast<ClassDeclaration>(
+          `import React from 'react';
+             class X extends React.Component<DefaultProps, Props, State> {
+               render() {}
+             }`,
+        );
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+
+      test('finds props type in properties', () => {
+        const path = parse.statementLast<ClassDeclaration>(
+          `import React from 'react';
+           class X extends React.Component {
+             props: Props;
+             render() {}
+           }`,
+        );
+
+        expect(getTypeFromReactComponent(path)).toMatchSnapshot();
+      });
+    });
+  });
+});

packages/react-docgen/src/utils/getTypeFromReactComponent.ts

@@ -27,7 +27,7 @@ import getTypeIdentifier from './getTypeIdentifier.js';
 function getStatelessPropsPath(
   componentDefinition: NodePath,
 ): NodePath | undefined {
-  let value = resolveToValue(componentDefinition);
+  let value = componentDefinition;
 
   if (isReactForwardRefCall(value)) {
     value = resolveToValue(value.get('arguments')[0]!);
@@ -40,7 +40,7 @@ function getStatelessPropsPath(
 
 /**
  * Given an React component (stateless or class) tries to find the
- * flow type for the props. If not found or not one of the supported
+ * flow or TS type for the props. If not found or not one of the supported
  * component types returns null.
  */
 export default (path: NodePath): NodePath | null => {