[Fix] prop-types, propTypes: add handling for FC<Props>, improv…

…e tests
jsx-eslint · Aug 26, 2021 · b385132 · b385132
1 parent d74a7d8
commit b385132
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
@@ -100,7 +100,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
   const defaults = {customValidators: []};
   const configuration = Object.assign({}, defaults, context.options[0] || {});
   const customValidators = configuration.customValidators;
-  const allowedGenericTypes = ['React.SFC', 'React.StatelessComponent', 'React.FunctionComponent', 'React.FC'];
+  const allowedGenericTypes = ['SFC', 'StatelessComponent', 'FunctionComponent', 'FC'];
 
   /**
    * Returns the full scope.
@@ -548,7 +548,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
       let typeName;
       if (astUtil.isTSTypeReference(node)) {
         typeName = node.typeName.name;
-        if (!typeName && node.typeParameters && node.typeParameters.length !== 0) {
+        const shouldTraverseTypeParams = !typeName || allowedGenericTypes.includes(typeName);
+        if (shouldTraverseTypeParams && node.typeParameters && node.typeParameters.length !== 0) {
           const nextNode = node.typeParameters.params[0];
           this.visitTSNode(nextNode);
           return;
@@ -940,7 +941,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
         return;
       }
 
-      const typeName = context.getSourceCode().getText(annotation.typeName).replace(/ /g, '');
+      // Accounts for FC<Props> or React.FC<Props>
+      const typeName = annotation.typeName.name || annotation.typeName.right.name;
 
       if (allowedGenericTypes.indexOf(typeName) === -1) {
         return;

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -3196,6 +3196,43 @@ ruleTester.run('prop-types', rule, {
           );
         `,
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+          type PersonProps = {
+              username: string;
+          }
+          const Person: FunctionComponent<PersonProps> = (props): React.ReactElement => (
+              <div>{props.username}</div>
+          );
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+          type PersonProps = {
+              username: string;
+          }
+          const Person: FC<PersonProps> = (props): React.ReactElement => (
+              <div>{props.username}</div>
+          );
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        // issue: https://github.com/yannickcr/eslint-plugin-react/issues/2786
+        code: `
+          import React from 'react';
+
+          interface Props {
+            item: any;
+          }
+
+          const SomeComponent: React.FC<Props> = ({ item }: Props) => {
+            return item ? <></> : <></>;
+          };
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ]),
     {
@@ -6706,6 +6743,24 @@ ruleTester.run('prop-types', rule, {
           }
         ],
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+          import React from 'react';
+          interface PersonProps {
+              username: string;
+          }
+          const Person: FunctionComponent<PersonProps> = (props): React.ReactElement => (
+              <div>{props.test}</div>
+          );
+        `,
+        errors: [
+          {
+            messageId: 'missingPropType',
+            data: {name: 'test'}
+          }
+        ],
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ])
   )