[Fix] propTypes: add VoidFunctionComponent to react generic list

jsx-eslint · Oct 1, 2021 · c296418 · c296418
1 parent 783d4cd
commit c296418
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
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 = new Set(['PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
+  const allowedGenericTypes = new Set(['VoidFunctionComponent', 'PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
   const genericReactTypesImport = new Set();
 
   /**

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -3317,6 +3317,36 @@ ruleTester.run('prop-types', rule, {
           };
         `,
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React, { VoidFunctionComponent } from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: VoidFunctionComponent<Props> = function Hello(props) {
+            const { age } = props;
+
+            return <div>Hello {age}</div>;
+           }
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: React.VoidFunctionComponent<Props> = function Hello(props) {
+            const { age } = props;
+
+            return <div>Hello {age}</div>;
+           }
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ]),
     {
@@ -6896,6 +6926,48 @@ ruleTester.run('prop-types', rule, {
           }
         ],
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React, { VoidFunctionComponent } from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: VoidFunctionComponent<Props> = function Hello(props) {
+            const { test } = props;
+
+            return <div>Hello {name}</div>;
+           }
+        `,
+        errors: [
+          {
+            messageId: 'missingPropType',
+            data: {name: 'test'}
+          }
+        ],
+        parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: React.VoidFunctionComponent<Props> = function Hello(props) {
+            const { test } = props;
+
+            return <div>Hello {name}</div>;
+           }
+        `,
+        errors: [
+          {
+            messageId: 'missingPropType',
+            data: {name: 'test'}
+          }
+        ],
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ])
   )