[Fix] propTypes: add VoidFunctionComponent to react generic list

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

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`no-unused-class-component-methods`]: Handle unused class component methods ([#2166][] @jakeleventhal @pawelnvk)
 * add [`no-arrow-function-lifecycle`] ([#1980][] @ngtan)
 
+### Fixed
+* [`propTypes`]: add `VoidFunctionComponent` to react generic list ([#3092][] @vedadeepta)
+
+[#3092]: https://github.com/yannickcr/eslint-plugin-react/pull/3092
 [#2166]: https://github.com/yannickcr/eslint-plugin-react/pull/2166
 [#1980]: https://github.com/yannickcr/eslint-plugin-react/pull/1980
 

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']
       }
     ])
   )