diff --git a/lib/rules/no-this-in-sfc.js b/lib/rules/no-this-in-sfc.js index 3883a36d69..accf63d244 100644 --- a/lib/rules/no-this-in-sfc.js +++ b/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 - }); - } - } - })) + }; + }) }; diff --git a/tests/lib/rules/no-this-in-sfc.js b/tests/lib/rules/no-this-in-sfc.js index 026b44dc1a..7082a8869e 100644 --- a/tests/lib/rules/no-this-in-sfc.js +++ b/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
; }` }, { code: ` + import React from 'react'; function Foo({ foo }) { return
; }` }, { code: ` + import React from 'react'; class Foo extends React.Component { render() { const { foo } = this.props; @@ -47,6 +50,7 @@ ruleTester.run('no-this-in-sfc', rule, { }` }, { code: ` + import React from 'react'; const Foo = createReactClass({ render: function() { return
{this.props.foo}
; @@ -54,6 +58,7 @@ ruleTester.run('no-this-in-sfc', rule, { });` }, { code: ` + import React from 'react'; const Foo = React.createClass({ render: function() { return
{this.props.foo}
; @@ -72,11 +77,13 @@ ruleTester.run('no-this-in-sfc', rule, { ` }, { code: ` + import React from 'react'; function Foo(props) { return props.foo ? {props.bar} : null; }` }, { code: ` + import React from 'react'; function Foo(props) { if (props.foo) { return
{props.bar}
; @@ -92,16 +99,43 @@ ruleTester.run('no-this-in-sfc', rule, { return null; }` }, { - code: 'const Foo = (props) => {props.foo}' + code: ` + import React from 'react'; + const Foo = (props) => {props.foo}` + }, { + code: ` + import React from 'react'; + const Foo = ({ foo }) => {foo}` }, { - code: 'const Foo = ({ foo }) => {foo}' + code: ` + import React from 'react'; + const Foo = (props) => props.foo ? {props.bar} : null;` }, { - code: 'const Foo = (props) => props.foo ? {props.bar} : null;' + code: ` + import React from 'react'; + const Foo = ({ foo, bar }) => foo ? {bar} : null;` + }, { + code: ` + function Foo(props) { + if (this.props.foo) { + something(); + } + return null; + }` }, { - code: 'const Foo = ({ foo, bar }) => foo ? {bar} : null;' + code: ` + class Foo { + bar() { + return () => { + this.reset(); + return null; + }; + } + }` }], invalid: [{ code: ` + import React from 'react'; function Foo(props) { const { foo } = this.props; return
{foo}
; @@ -109,18 +143,21 @@ ruleTester.run('no-this-in-sfc', rule, { errors: [{message: ERROR_MESSAGE}] }, { code: ` + import React from 'react'; function Foo(props) { return
{this.props.foo}
; }`, errors: [{message: ERROR_MESSAGE}] }, { code: ` + import React from 'react'; function Foo(props) { return
{this.state.foo}
; }`, errors: [{message: ERROR_MESSAGE}] }, { code: ` + import React from 'react'; function Foo(props) { const { foo } = this.state; return
{foo}
; @@ -128,12 +165,14 @@ ruleTester.run('no-this-in-sfc', rule, { errors: [{message: ERROR_MESSAGE}] }, { code: ` + import React from 'react'; function Foo(props) { return props.foo ?
{this.props.bar}
: null; }`, errors: [{message: ERROR_MESSAGE}] }, { code: ` + import React from 'react'; function Foo(props) { if (props.foo) { return
{this.props.bar}
; @@ -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) => {this.props.foo}`, errors: [{message: ERROR_MESSAGE}] }, { - code: 'const Foo = (props) => {this.props.foo}', - errors: [{message: ERROR_MESSAGE}] - }, { - code: 'const Foo = (props) => this.props.foo ? {props.bar} : null;', + code: ` + import React from 'react'; + const Foo = (props) => this.props.foo ? {props.bar} : null;`, errors: [{message: ERROR_MESSAGE}] }, { code: ` + import React from 'react'; function Foo(props) { function onClick(bar) { this.props.onClick();