[Fix] display-name: fix misinterpreted function components

- when determining if an `ArrowFunctionExpression` returns JSX, do not check arguments to a returned `CallExpression`
jsx-eslint · Sep 1, 2021 · 0ed3bdc · 0ed3bdc
1 parent 810806e
commit 0ed3bdc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ## Unreleased
 
 ### Fixed
+* [`display-name`]: fix arrow function returning result of function call with JSX arguments being interpreted as component ([#3065][], @danielfinke)
 * [`jsx-no-useless-fragments`]: Handle insignificant whitespace correctly when `allowExpressions` is `true` ([#3061][] @benj-dobs)
 * [`prop-types`], `propTypes`: handle implicit `children` prop in react's generic types ([#3064][] @vedadeepta)
 

diff --git a/lib/util/jsx.js b/lib/util/jsx.js
@@ -130,6 +130,7 @@ function isReturningJSX(isCreateElement, ASTnode, context, strict, ignoreNull) {
             if (isCreateElement(childNode)) {
               setFound();
             }
+            this.skip();
             break;
           case 'Literal':
             if (!ignoreNull && childNode.value === null) {

diff --git a/tests/util/jsx.js b/tests/util/jsx.js
@@ -27,9 +27,7 @@ describe('jsxUtil', () => {
     const assertValid = (codeStr) => assert(
       isReturningJSX(() => false, parseCode(codeStr), mockContext)
     );
-    const assertInValid = (codeStr) => assert(
-      !!isReturningJSX(() => false, parseCode(codeStr), mockContext)
-    );
+
     it('Works when returning JSX', () => {
       assertValid(`
         function Test() {
@@ -71,11 +69,27 @@ describe('jsxUtil', () => {
     });
 
     it('Can ignore null', () => {
-      assertInValid(`
+      assertValid(`
         function Test() {
           return null;
         }
       `);
     });
+
+    it('Ignores JSX arguments to function calls used as return value of arrow functions', () => {
+      let astNode = parseCode(`const obj = {
+        prop: () => test(<a>something</a>)
+      }`);
+      let arrowFunctionExpression = astNode.declarations[0].init.properties[0].value;
+
+      assert(!isReturningJSX(() => false, arrowFunctionExpression, mockContext));
+
+      astNode = parseCode(`const obj = {
+        prop: () => { return test(<a>something</a>); }
+      }`);
+      arrowFunctionExpression = astNode.declarations[0].init.properties[0].value;
+
+      assert(!isReturningJSX(() => false, arrowFunctionExpression, mockContext));
+    });
   });
 });