[Fix] function-component-definition: ignore object properties

Fixes #2765.
jsx-eslint · Aug 26, 2020 · a00e067 · a00e067
1 parent 911f66e
commit a00e067
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 0 deletions.
diff --git a/lib/rules/function-component-definition.js b/lib/rules/function-component-definition.js
@@ -156,6 +156,9 @@ module.exports = {
 
     function validate(node, functionType) {
       if (!components.get(node)) return;
+
+      if (node.parent && node.parent.type === 'Property') return;
+
       if (hasName(node) && namedConfig !== functionType) {
         report(node, {
           message: ERROR_MESSAGES[namedConfig],

diff --git a/tests/lib/rules/function-component-definition.js b/tests/lib/rules/function-component-definition.js
@@ -166,6 +166,144 @@ ruleTester.run('function-component-definition', rule, {
     code: 'function Hello(props): ReactNode { return <p/> }',
     options: [{namedComponents: 'function-declaration'}],
     parser: parsers.TYPESCRIPT_ESLINT
+  },
+  // https://github.com/yannickcr/eslint-plugin-react/issues/2765
+  {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-declaration'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-expression'}]
+  },
+  {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-declaration'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-declaration'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{namedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize(el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: (el) => {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'function-expression'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'arrow-function'}]
+  }, {
+    code: [
+      'const obj = {',
+      '  serialize: function (el) {',
+      '    return <p/>',
+      '  }',
+      '}'
+    ].join('\n'),
+    options: [{unnamedComponents: 'function-expression'}]
   }],
 
   invalid: [{