fix PR comment (improve detection) + update old tests

jsx-eslint · Jun 6, 2021 · 0d9ef7b · 0d9ef7b
1 parent 79a7bcc
commit 0d9ef7b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 21 deletions.
diff --git a/lib/util/Components.js b/lib/util/Components.js
@@ -651,7 +651,7 @@ function componentRule(rule, context) {
           return undefined;
         }
         if (utils.isInAllowedPositionForComponent(node) && utils.isReturningJSXOrNull(node)) {
-          if (utils.isArrowOrFunctionExpressionRenderWithParams(node)) return undefined;
+          if (utils.isParentComponentNotStatelessComponent(node)) return undefined;
 
           const isMethod = node.parent.type === 'Property' && node.parent.method;
 
@@ -802,12 +802,13 @@ function componentRule(rule, context) {
       return components.add(componentNode, 1);
     },
 
-    isArrowOrFunctionExpressionRenderWithParams(node) {
+    isParentComponentNotStatelessComponent(node) {
       return (
         node.parent
         && node.parent.key
         && node.parent.key.type === 'Identifier'
-        && node.parent.key.name === 'render'
+        // custom component functions must start with a capital letter (returns false otherwise)
+        && node.parent.key.name.charAt(0) === node.parent.key.name.charAt(0).toLowerCase()
         // react render function cannot have params
         && !!(node.params || []).length
       );

diff --git a/tests/lib/rules/destructuring-assignment.js b/tests/lib/rules/destructuring-assignment.js
@@ -220,7 +220,7 @@ ruleTester.run('destructuring-assignment', rule, {
           render: val => <span>{val}</span>,
         },
         {
-          render: function(val) {
+          someRenderFunc: function(val) {
             if (val.url) {
               return (
                 <a href={val.url}>
@@ -390,5 +390,27 @@ ruleTester.run('destructuring-assignment', rule, {
       messageId: 'noDestructAssignment',
       data: {type: 'state'}
     }]
+  }, {
+    code: `
+      const columns = [
+        {
+          CustomComponentName: function(props) {
+            if (props.url) {
+              return (
+                <a href={props.url}>
+                  {props.test}
+                </a>
+              );
+            }
+            return null;
+          },
+        },
+      ];
+    `,
+    parser: parsers.BABEL_ESLINT,
+    errors: [{
+      messageId: 'useDestructAssignment',
+      data: {type: 'props'}
+    }]
   }]
 });
diff --git a/tests/lib/rules/no-multi-comp.js b/tests/lib/rules/no-multi-comp.js
@@ -316,11 +316,11 @@ ruleTester.run('no-multi-comp', rule, {
   }, {
     code: [
       'export default {',
-      '  renderHello(props) {',
+      '  RenderHello(props) {',
       '    let {name} = props;',
       '    return <div>{name}</div>;',
       '  },',
-      '  renderHello2(props) {',
+      '  RenderHello2(props) {',
       '    let {name} = props;',
       '    return <div>{name}</div>;',
       '  }',

diff --git a/tests/lib/rules/no-unstable-nested-components.js b/tests/lib/rules/no-unstable-nested-components.js
@@ -490,6 +490,20 @@ ruleTester.run('no-unstable-nested-components', rule, {
         },
       });
       `
+    },
+    {
+      code: `
+      function ParentComponent() {
+        const rows = [
+          {
+            name: 'A',
+            notPrefixedWithRender: (props) => <Row {...props} />
+          },
+        ];
+
+        return <Table rows={rows} />;
+      }
+      `
     }
     /* TODO These minor cases are currently falsely marked due to component detection
     {
@@ -1010,21 +1024,6 @@ ruleTester.run('no-unstable-nested-components', rule, {
       `,
       errors: [{message: ERROR_MESSAGE_COMPONENT_AS_PROPS}]
     },
-    {
-      code: `
-      function ParentComponent() {
-        const rows = [
-          {
-            name: 'A',
-            notPrefixedWithRender: (props) => <Row {...props} />
-          },
-        ];
-
-        return <Table rows={rows} />;
-      }
-      `,
-      errors: [{message: ERROR_MESSAGE}]
-    },
     {
       code: `
       class ParentComponent extends React.Component {