chore: add tc for class components

jsx-eslint · May 15, 2024 · 34b6a94 · 34b6a94
1 parent 61981c7
commit 34b6a94
Show file tree

Hide file tree

Showing 2 changed files with 261 additions and 15 deletions.
diff --git a/lib/rules/no-render-return-undefined.js b/lib/rules/no-render-return-undefined.js
@@ -28,13 +28,7 @@ module.exports = {
   },
 
   create(context) {
-    const handleFunctionalComponents = (node) => {
-      const fnName = (node.id && node.id.name) || node.parent.id.name;
-      const isReactComponent = fnName[0] === fnName[0].toUpperCase();
-      const returnStatement = astUtil.findReturnStatement(node);
-
-      if (!isReactComponent) return;
-
+    const isReturningUndefined = (returnStatement) => {
       const variables = variableUtil.variablesInScope(context);
       const returnNode = returnStatement && returnStatement.argument;
       const returnIdentifierName = returnNode && returnNode.name;
@@ -73,13 +67,35 @@ module.exports = {
       const returnsArrayHavingUndefined = Array.isArray(returnIdentifierValue)
           && returnIdentifierValue.some((el) => el.type === 'Identifier' && el.name === 'undefined');
 
-      if (
-        !returnStatement
-        || returnIdentifierName === 'undefined'
-        || returnIdentifierValue === undefined
-        || (returnIdentifierValue && returnIdentifierValue.name === 'undefined')
-        || returnsArrayHavingUndefined
-      ) {
+      return !returnStatement
+          || returnIdentifierName === 'undefined'
+          || returnIdentifierValue === undefined
+          || (returnIdentifierValue && returnIdentifierValue.name === 'undefined')
+          || returnsArrayHavingUndefined;
+    };
+
+    const handleFunctionalComponents = (node) => {
+      const fnName = (node.id && node.id.name) || node.parent.id.name;
+
+      // Considering functions starting with Uppercase letters are react components
+      const isReactComponent = fnName[0] === fnName[0].toUpperCase();
+      const returnStatement = astUtil.findReturnStatement(node);
+
+      if (!isReactComponent) return;
+
+      if (isReturningUndefined(returnStatement)) {
+        report(context, messages.returnsUndefined, 'returnsUndefined', {
+          node,
+        });
+      }
+    };
+
+    const handleClassComponents = (node) => {
+      const componentProperties = astUtil.getComponentProperties(node);
+      const renderFnNode = componentProperties.find((prop) => prop.key.name === 'render');
+      const returnStatement = astUtil.findReturnStatement(renderFnNode);
+
+      if (isReturningUndefined(returnStatement)) {
         report(context, messages.returnsUndefined, 'returnsUndefined', {
           node,
         });
@@ -89,6 +105,8 @@ module.exports = {
     return {
       FunctionDeclaration: handleFunctionalComponents,
       ArrowFunctionExpression: handleFunctionalComponents,
+      ClassDeclaration: handleClassComponents,
+      ClassExpression: handleClassComponents,
     };
   },
 };
diff --git a/tests/lib/rules/no-render-return-undefined.js b/tests/lib/rules/no-render-return-undefined.js
@@ -28,6 +28,7 @@ const parserOptions = {
 
 const ruleTester = new RuleTester({ parserOptions });
 ruleTester.run('no-render-return-undefined', rule, {
+  // Valid Cases
   valid: parsers.all([
     {
       code: `
@@ -125,7 +126,128 @@ ruleTester.run('no-render-return-undefined', rule, {
             }
         `,
     },
+
+    // Class Components
+    {
+      code: `
+        class App {
+          render() {
+            return 1;
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        const App = class {
+          render() {
+            return 1;
+          }
+        }      
+      `,
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return 1;
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return "Hello World";
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        const App = class {
+          render() {
+            return "Hello World";
+          }
+        }      
+      `,
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return "Hello World";
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return <div />;
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        const App = class {
+          render() {
+            return <div />;
+          }
+        }      
+      `,
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return <div />;
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return [1, "Hello", <div />];
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return [1, "Hello", <div />];
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return null;
+          }
+        }
+      `,
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return null;
+          }
+        }
+      `,
+    },
   ]),
+
+  // Invalid Cases
   invalid: parsers.all([
     {
       code: `
@@ -235,7 +357,6 @@ ruleTester.run('no-render-return-undefined', rule, {
     {
       code: `
             function foo() {}
-
             function App() {
                 return foo();
             }
@@ -286,5 +407,112 @@ ruleTester.run('no-render-return-undefined', rule, {
           `,
       errors: [{ messageId: 'returnsUndefined' }],
     },
+    // Class Components
+    {
+      code: `
+        class App {
+          render() {
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        const App = class {
+          render() {}
+        }      
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return;
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return;
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return undefined;
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return undefined;
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return [undefined];
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return [undefined];
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App {
+          render() {
+            return [1, undefined];
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        class App extends React.Component {
+          render() {
+            return [1, undefined];
+          }
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
   ]),
 });