Do not take properties with computed keys into account for the no-unu…

…sed-state rule - unless the key is a literal
jsx-eslint · Aug 23, 2017 · ed44436 · ed44436
1 parent 44ca52b
commit ed44436
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 1 deletion.
diff --git a/lib/rules/no-unused-state.js b/lib/rules/no-unused-state.js
@@ -92,7 +92,14 @@ module.exports = {
     // current set of state fields.
     function addStateFields(node) {
       for (const prop of node.properties) {
-        if (prop.type === 'Property' && getName(prop.key) !== null) {
+        const key = prop.key;
+
+        if (
+          prop.type === 'Property' &&
+          (key.type === 'Literal' ||
+          (prop.computed === false && key.type === 'Identifier')) &&
+          getName(prop.key) !== null
+        ) {
           classInfo.stateFields.add(prop);
         }
       }

diff --git a/tests/lib/rules/no-unused-state.js b/tests/lib/rules/no-unused-state.js
@@ -46,6 +46,54 @@ eslintTester.run('no-unused-state', rule, {
         return <SomeComponent foo={this.state.foo} />;
       }
     });`,
+    `var ComputedKeyFromVariableTest = createReactClass({
+      getInitialState: function() {
+        return { [foo]: 0 };
+      },
+      render: function() {
+        return <SomeComponent />;
+      }
+    });`,
+    `var ComputedKeyFromBooleanLiteralTest = createReactClass({
+      getInitialState: function() {
+        return { [true]: 0 };
+      },
+      render: function() {
+        return <SomeComponent foo={this.state[true]} />;
+      }
+    });`,
+    `var ComputedKeyFromExpressionTest = createReactClass({
+      getInitialState: function() {
+        return { [foo + bar]: 0 };
+      },
+      render: function() {
+        return <SomeComponent />;
+      }
+    });`,
+    `var ComputedKeyFromBinaryExpressionTest = createReactClass({
+      getInitialState: function() {
+        return { ['foo' + 'bar' * 8]: 0 };
+      },
+      render: function() {
+        return <SomeComponent />;
+      }
+    });`,
+    `var ComputedKeyFromStringLiteralTest = createReactClass({
+      getInitialState: function() {
+        return { ['foo']: 0 };
+      },
+      render: function() {
+        return <SomeComponent foo={this.state.foo} />;
+      }
+    });`,
+    `var ComputedKeyFromTemplateLiteralTest = createReactClass({
+      getInitialState: function() {
+        return { [\`foo\${bar}\`]: 0 };
+      },
+      render: function() {
+        return <SomeComponent />;
+      }
+    });`,
     `var GetInitialStateMethodTest = createReactClass({
       getInitialState() {
         return { foo: 0 };
@@ -86,6 +134,54 @@ eslintTester.run('no-unused-state', rule, {
         return <SomeComponent foo={this.state.foo} />;
       }
     }`,
+    `class ComputedKeyFromVariableTest extends React.Component {
+      constructor() {
+        this.state = { [foo]: 0 };
+      }
+      render() {
+        return <SomeComponent />;
+      }
+    }`,
+    `class ComputedKeyFromBooleanLiteralTest extends React.Component {
+      constructor() {
+        this.state = { [false]: 0 };
+      }
+      render() {
+        return <SomeComponent foo={this.state['false']} />;
+      }
+    }`,
+    `class ComputedKeyFromExpressionTest extends React.Component {
+      constructor() {
+        this.state = { [foo + bar]: 0 };
+      }
+      render() {
+        return <SomeComponent />;
+      }
+    }`,
+    `class ComputedKeyFromBinaryExpressionTest extends React.Component {
+      constructor() {
+        this.state = { [1 + 2 * 8]: 0 };
+      }
+      render() {
+        return <SomeComponent />;
+      }
+    }`,
+    `class ComputedKeyFromStringLiteralTest extends React.Component {
+      constructor() {
+        this.state = { ['foo']: 0 };
+      }
+      render() {
+        return <SomeComponent foo={this.state.foo} />;
+      }
+    }`,
+    `class ComputedKeyFromTemplateLiteralTest extends React.Component {
+      constructor() {
+        this.state = { [\`foo\${bar}\`]: 0 };
+      }
+      render() {
+        return <SomeComponent />;
+      }
+    }`,
     `class SetStateTest extends React.Component {
         onFooChange(newFoo) {
           this.setState({ foo: newFoo });
@@ -284,6 +380,17 @@ eslintTester.run('no-unused-state', rule, {
         })`,
       errors: getErrorMessages(['foo'])
     },
+    {
+      code: `var UnusedComputedLiteralKeyStateTest = createReactClass({
+          getInitialState: function() {
+            return { ['foo']: 0 };
+          },
+          render: function() {
+            return <SomeComponent />;
+          }
+        })`,
+      errors: getErrorMessages(['foo'])
+    },
     {
       code: `var UnusedGetInitialStateMethodTest = createReactClass({
           getInitialState() {
@@ -338,6 +445,26 @@ eslintTester.run('no-unused-state', rule, {
       errors: getErrorMessages(['foo']),
       parser: 'babel-eslint'
     },
+    {
+      code: `class UnusedComputedStringLiteralKeyStateTest extends React.Component {
+          state = { ['foo']: 0 };
+          render() {
+            return <SomeComponent />;
+          }
+        }`,
+      errors: getErrorMessages(['foo']),
+      parser: 'babel-eslint'
+    },
+    {
+      code: `class UnusedComputedBooleanLiteralKeyStateTest extends React.Component {
+          state = { [true]: 0 };
+          render() {
+            return <SomeComponent />;
+          }
+        }`,
+      errors: getErrorMessages(['true']),
+      parser: 'babel-eslint'
+    },
     {
       code: `class UnusedStateWhenPropsAreSpreadTest extends React.Component {
           constructor() {