[Fix] display-name: avoid false positives on non-creatClass object …

…expressions Fixes #3144
jsx-eslint · Nov 19, 2021 · 893dbff · 893dbff
1 parent eb81897
commit 893dbff
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,11 +10,13 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`no-unused-class-component-methods`]: add `getChildContext` lifecycle method ([#3136][] @yoyo837)
 * [`prop-types`]: fix false positives on renames in object destructuring ([#3142][] @golopot)
 * [`no-arrow-function-lifecycle`]: fix invalid autofix from a concise arrow method to a regular one ([#3145][] @ljharb)
+* [`display-name`]: avoid false positives on non-creatClass object expressions ([#3144] @ljharb)
 
 ### Changed
 * [readme] fix syntax typo ([#3141][] @moselhy)
 
 [#3145]: https://github.com/yannickcr/eslint-plugin-react/issue/3145
+[#3144]: https://github.com/yannickcr/eslint-plugin-react/issue/3144
 [#3142]: https://github.com/yannickcr/eslint-plugin-react/pull/3142
 [#3141]: https://github.com/yannickcr/eslint-plugin-react/pull/3141
 [#3136]: https://github.com/yannickcr/eslint-plugin-react/pull/3136

diff --git a/lib/rules/display-name.js b/lib/rules/display-name.js
@@ -192,6 +192,9 @@ module.exports = {
       },
 
       ObjectExpression(node) {
+        if (!utils.isES5Component(node)) {
+          return;
+        }
         if (ignoreTranspilerName || !hasTranspilerName(node)) {
           // Search for the displayName declaration
           node.properties.forEach((property) => {

diff --git a/tests/lib/rules/display-name.js b/tests/lib/rules/display-name.js
@@ -914,5 +914,32 @@ ruleTester.run('display-name', rule, {
         { message: 'Component definition is missing display name' },
       ],
     },
+    {
+      code: `
+        const processData = (options?: { value: string }) => options?.value || 'no data';
+
+        export const Component = observer(() => {
+          const data = processData({ value: 'data' });
+          return <div>{data}</div>;
+        });
+        
+        export const Component2 = observer(() => {
+          const data = processData();
+          return <div>{data}</div>;
+        });      
+      `,
+      features: ['optional chaining', 'types'],
+      settings: { componentWrapperFunctions: ['observer'] },
+      errors: [
+        {
+          message: 'Component definition is missing display name',
+          line: 4,
+        },
+        {
+          message: 'Component definition is missing display name',
+          line: 9,
+        },
+      ],
+    },
   ]),
 });