Fix no-did-mount/update-set-state rules for ES6 classes

Author: yannickcr

lib/rules/no-did-mount-set-state.js

@@ -34,7 +34,7 @@ module.exports = function(context) {
           depth++;
         }
         if (
-          ancestors[i].type !== 'Property' ||
+          (ancestors[i].type !== 'Property' && ancestors[i].type !== 'MethodDefinition') ||
           ancestors[i].key.name !== 'componentDidMount' ||
           (mode === 'allow-in-func' && depth > 1)
         ) {

lib/rules/no-did-update-set-state.js

@@ -26,7 +26,10 @@ module.exports = function(context) {
       }
       var ancestors = context.getAncestors(callee);
       for (var i = 0, j = ancestors.length; i < j; i++) {
-        if (ancestors[i].type !== 'Property' || ancestors[i].key.name !== 'componentDidUpdate') {
+        if (
+          (ancestors[i].type !== 'Property' && ancestors[i].type !== 'MethodDefinition') ||
+          ancestors[i].key.name !== 'componentDidUpdate'
+        ) {
           continue;
         }
         context.report(callee, 'Do not use setState in componentDidUpdate');

tests/lib/rules/no-did-mount-set-state.js

@@ -104,6 +104,20 @@ ruleTester.run('no-did-mount-set-state', rule, {
     errors: [{
       message: 'Do not use setState in componentDidMount'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  componentDidMount() {',
+      '    this.setState({',
+      '      data: data',
+      '    });',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState in componentDidMount'
+    }]
   }, {
     code: [
       'var Hello = React.createClass({',
@@ -121,6 +135,21 @@ ruleTester.run('no-did-mount-set-state', rule, {
     errors: [{
       message: 'Do not use setState in componentDidMount'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  componentDidMount() {',
+      '    this.setState({',
+      '      data: data',
+      '    });',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    options: ['allow-in-func'],
+    errors: [{
+      message: 'Do not use setState in componentDidMount'
+    }]
   }, {
     code: [
       'var Hello = React.createClass({',
@@ -139,6 +168,22 @@ ruleTester.run('no-did-mount-set-state', rule, {
     errors: [{
       message: 'Do not use setState in componentDidMount'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  componentDidMount() {',
+      '    someClass.onSomeEvent(function(data) {',
+      '      this.setState({',
+      '        data: data',
+      '      });',
+      '    })',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState in componentDidMount'
+    }]
   }, {
     code: [
       'var Hello = React.createClass({',
@@ -157,6 +202,22 @@ ruleTester.run('no-did-mount-set-state', rule, {
     errors: [{
       message: 'Do not use setState in componentDidMount'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  componentDidMount() {',
+      '    if (true) {',
+      '      this.setState({',
+      '        data: data',
+      '      });',
+      '    }',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState in componentDidMount'
+    }]
   }, {
     code: [
       'var Hello = React.createClass({',
@@ -172,5 +233,17 @@ ruleTester.run('no-did-mount-set-state', rule, {
     errors: [{
       message: 'Do not use setState in componentDidMount'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  componentDidMount() {',
+      '    someClass.onSomeEvent((data) => this.setState({data: data}));',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState in componentDidMount'
+    }]
   }]
 });

tests/lib/rules/no-did-update-set-state.js

@@ -77,5 +77,22 @@ ruleTester.run('no-did-update-set-state', rule, {
     errors: [{
       message: 'Do not use setState in componentDidUpdate'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  componentDidUpdate() {',
+      '    this.setState({',
+      '      name: this.props.name.toUpperCase()',
+      '    });',
+      '  }',
+      '  render() {',
+      '    return <div>Hello {this.state.name}</div>;',
+      '  }',
+      '}'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState in componentDidUpdate'
+    }]
   }]
 });