Apply no-this-in-sfc rule only for modules with react import

lib/rules/no-this-in-sfc.js

@@ -27,18 +27,33 @@ module.exports = {
     schema: []
   },
 
-  create: Components.detect((context, components, utils) => ({
-    MemberExpression(node) {
-      const component = components.get(utils.getParentStatelessComponent());
-      if (!component) {
-        return;
+  create: Components.detect((context, components, utils) => {
+    let hasReactImport = false;
+    return {
+      ImportDeclaration(node) {
+        if (hasReactImport) {
+          return;
+        }
+        const isReactImport = node.source.value === 'react';
+        if (isReactImport) {
+          hasReactImport = true;
+        }
+      },
+      MemberExpression(node) {
+        if (!hasReactImport) {
+          return;
+        }
+        const component = components.get(utils.getParentStatelessComponent());
+        if (!component) {
+          return;
+        }
+        if (node.object.type === 'ThisExpression') {
+          context.report({
+            node: node,
+            message: ERROR_MESSAGE
+          });
+        }
       }
-      if (node.object.type === 'ThisExpression') {
-        context.report({
-          node: node,
-          message: ERROR_MESSAGE
-        });
-      }
-    }
-  }))
+    };
+  })
 };

tests/lib/rules/no-this-in-sfc.js

@@ -28,17 +28,20 @@ const ruleTester = new RuleTester({parserOptions});
 ruleTester.run('no-this-in-sfc', rule, {
   valid: [{
     code: `
+    import React from 'react';
     function Foo(props) {
       const { foo } = props;
       return <div bar={foo} />;
     }`
   }, {
     code: `
+    import React from 'react';
     function Foo({ foo }) {
       return <div bar={foo} />;
     }`
   }, {
     code: `
+    import React from 'react';
     class Foo extends React.Component {
       render() {
         const { foo } = this.props;
@@ -47,13 +50,15 @@ ruleTester.run('no-this-in-sfc', rule, {
     }`
   }, {
     code: `
+    import React from 'react';
     const Foo = createReactClass({
       render: function() {
         return <div>{this.props.foo}</div>;
       }
     });`
   }, {
     code: `
+    import React from 'react';
     const Foo = React.createClass({
       render: function() {
         return <div>{this.props.foo}</div>;
@@ -72,11 +77,13 @@ ruleTester.run('no-this-in-sfc', rule, {
     `
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       return props.foo ? <span>{props.bar}</span> : null;
     }`
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       if (props.foo) {
         return <div>{props.bar}</div>;
@@ -92,48 +99,80 @@ ruleTester.run('no-this-in-sfc', rule, {
       return null;
     }`
   }, {
-    code: 'const Foo = (props) => <span>{props.foo}</span>'
+    code: `
+    import React from 'react';
+    const Foo = (props) => <span>{props.foo}</span>`
+  }, {
+    code: `
+    import React from 'react';
+    const Foo = ({ foo }) => <span>{foo}</span>`
   }, {
-    code: 'const Foo = ({ foo }) => <span>{foo}</span>'
+    code: `
+    import React from 'react';
+    const Foo = (props) => props.foo ? <span>{props.bar}</span> : null;`
   }, {
-    code: 'const Foo = (props) => props.foo ? <span>{props.bar}</span> : null;'
+    code: `
+    import React from 'react';
+    const Foo = ({ foo, bar }) => foo ? <span>{bar}</span> : null;`
+  }, {
+    code: `
+    function Foo(props) {
+      if (this.props.foo) {
+        something();
+      }
+      return null;
+    }`
   }, {
-    code: 'const Foo = ({ foo, bar }) => foo ? <span>{bar}</span> : null;'
+    code: `
+    class Foo {
+      bar() { 
+        return () => {
+          this.reset();
+          return null;
+        };
+      }
+    }`
   }],
   invalid: [{
     code: `
+    import React from 'react';
     function Foo(props) {
       const { foo } = this.props;
       return <div>{foo}</div>;
     }`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       return <div>{this.props.foo}</div>;
     }`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       return <div>{this.state.foo}</div>;
     }`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       const { foo } = this.state;
       return <div>{foo}</div>;
     }`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       return props.foo ? <div>{this.props.bar}</div> : null;
     }`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       if (props.foo) {
         return <div>{this.props.bar}</div>;
@@ -143,21 +182,17 @@ ruleTester.run('no-this-in-sfc', rule, {
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
-    function Foo(props) {
-      if (this.props.foo) {
-        something();
-      }
-      return null;
-    }`,
+    import React from 'react';
+    const Foo = (props) => <span>{this.props.foo}</span>`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
-    code: 'const Foo = (props) => <span>{this.props.foo}</span>',
-    errors: [{message: ERROR_MESSAGE}]
-  }, {
-    code: 'const Foo = (props) => this.props.foo ? <span>{props.bar}</span> : null;',
+    code: `
+    import React from 'react';
+    const Foo = (props) => this.props.foo ? <span>{props.bar}</span> : null;`,
     errors: [{message: ERROR_MESSAGE}]
   }, {
     code: `
+    import React from 'react';
     function Foo(props) {
       function onClick(bar) {
         this.props.onClick();