fixup! [New] Symmetric useState hook variable names

jsx-eslint · Nov 23, 2021 · c00ac9a · c00ac9a
1 parent 11d533f
commit c00ac9a
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 83 deletions.
diff --git a/lib/rules/hook-use-state.js b/lib/rules/hook-use-state.js
@@ -19,16 +19,16 @@ module.exports = {
       description: 'Ensure symmetric naming of useState hook value and setter variables',
       category: 'Best Practices',
       recommended: false,
-      url: docsUrl('hook-use-state')
+      url: docsUrl('hook-use-state'),
     },
     fixable: 'code',
     messages: {
-      [USE_STATE_ERROR_MESSAGE]: 'setState call is not destructured into value + setter pair'
+      [USE_STATE_ERROR_MESSAGE]: 'setState call is not destructured into value + setter pair',
     },
     schema: [{
       type: 'object',
-      additionalProperties: false
-    }]
+      additionalProperties: false,
+    }],
   },
 
   create(context) {
@@ -63,7 +63,7 @@ module.exports = {
         );
 
         if (!isDestructuringDeclarator) {
-          context.report({node, messageId: USE_STATE_ERROR_MESSAGE});
+          context.report({ node, messageId: USE_STATE_ERROR_MESSAGE });
           return;
         }
 
@@ -97,7 +97,7 @@ module.exports = {
             fix: valueVariableName ? (fixer) => fixer.replaceTextRange(
               [node.parent.id.range[0], node.parent.id.range[1]],
               `[${valueVariableName}, ${expectedSetterVariableName}]`
-            ) : undefined
+            ) : undefined,
           });
         }
       },
@@ -118,7 +118,7 @@ module.exports = {
         reactUseStateLocalName = reactUseStateSpecifier
           ? reactUseStateSpecifier.local.name
           : undefined;
-      }
+      },
     };
-  }
+  },
 };
diff --git a/tests/lib/rules/hook-use-state.js b/tests/lib/rules/hook-use-state.js
@@ -20,208 +20,206 @@ const parsers = require('../../helpers/parsers');
 const ruleTester = new RuleTester({
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
-  }
+    sourceType: 'module',
+  },
 });
 
 const tests = {
-  valid: [
+  valid: parsers.all([
     {
       code: `import { useState } from 'react';
-      const [color, setColor] = useState()`
+      const [color, setColor] = useState()`,
     },
     {
       code: `import { useState } from 'react';
-      const [color, setColor] = useState('#ffffff')`
+      const [color, setColor] = useState('#ffffff')`,
     },
     {
       code: `import { useState } from 'react';
-      const [color, setColor] = React.useState()`
+      const [color, setColor] = React.useState()`,
     },
     {
       code: `import { useState } from 'react';
-      const [color1, setColor1] = useState()`
+      const [color1, setColor1] = useState()`,
     },
     {
-      code: 'const result = useState()'
+      code: 'const result = useState()',
     },
     {
-      code: `import { useRef } from 'react';
-      const result = useState()`
+      code: 'const [color, setFlavor] = useState()',
     },
     {
-      code: 'const result = React.useState()'
+      code: `import { useRef } from 'react';
+      const result = useState()`,
     },
     {
-      code: `import { useState } from 'react';
-      const [color, setColor] = useState<string>()`,
-      parser: parsers.TYPESCRIPT_ESLINT
+      code: 'const result = React.useState()',
     },
-    {
-      code: `import { useState } from 'react';
-      const [color, setColor] = useState<string>('#ffffff')`,
-      parser: parsers.TYPESCRIPT_ESLINT
-    }
-  ].concat(parsers.TS([
     {
       code: `import { useState } from 'react';
       const [color, setColor] = useState<string>()`,
-      parser: parsers['@TYPESCRIPT_ESLINT']
+      features: ['ts'],
     },
     {
       code: `import { useState } from 'react';
       const [color, setColor] = useState<string>('#ffffff')`,
-      parser: parsers['@TYPESCRIPT_ESLINT']
-    }
-  ])
-  ),
-  invalid: [
+      features: ['ts'],
+    },
+  ]),
+  invalid: parsers.all([
     {
       code: `import { useState } from 'react';
       useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState as useStateAlternativeName } from 'react';
       useStateAlternativeName()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import React from 'react';
       const result = React.useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import ReactAlternative from 'react';
       ReactAlternative.useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const result = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const [, , extra1] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const [, setColor] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const { color } = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const [] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const [, , , ,] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const [color] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
+        message: 'setState call is not destructured into value + setter pair',
       }],
       output: `import { useState } from 'react';
-      const [color, setColor] = useState()`
+      const [color, setColor] = useState()`,
     },
     {
       code: `import { useState } from 'react';
       const [color, , extra1] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
+        message: 'setState call is not destructured into value + setter pair',
       }],
       output: `import { useState } from 'react';
-      const [color, setColor] = useState()`
+      const [color, setColor] = useState()`,
     },
     {
       code: `import { useState } from 'react';
       const [color, setColor, extra1, extra2, extra3] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
+        message: 'setState call is not destructured into value + setter pair',
       }],
       output: `import { useState } from 'react';
-      const [color, setColor] = useState()`
+      const [color, setColor] = useState()`,
     },
     {
       code: `import { useState } from 'react';
       const [, makeColor] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
-      }]
+        message: 'setState call is not destructured into value + setter pair',
+      }],
     },
     {
       code: `import { useState } from 'react';
       const [color, setFlavor, extraneous] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
+        message: 'setState call is not destructured into value + setter pair',
       }],
       output: `import { useState } from 'react';
-      const [color, setColor] = useState()`
+      const [color, setColor] = useState()`,
     },
     {
       code: `import { useState } from 'react';
       const [color, setFlavor] = useState()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
+        message: 'setState call is not destructured into value + setter pair',
       }],
       output: `import { useState } from 'react';
-      const [color, setColor] = useState()`
+      const [color, setColor] = useState()`,
     },
     {
       code: `import { useState } from 'react';
       const [color, setFlavor] = useState<string>()`,
       errors: [{
-        message: 'setState call is not destructured into value + setter pair'
+        message: 'setState call is not destructured into value + setter pair',
       }],
       output: `import { useState } from 'react';
       const [color, setColor] = useState<string>()`,
-      parser: parsers.TYPESCRIPT_ESLINT
-    }
-  ].concat(
-    parsers.TS([
-      {
-        code: `import { useState } from 'react';
-        const [color, setFlavor] = useState<string>()`,
-        errors: [{
-          message: 'setState call is not destructured into value + setter pair'
-        }],
-        output: `import { useState } from 'react';
-        const [color, setColor] = useState<string>()`,
-        parser: parsers['@TYPESCRIPT_ESLINT']
-      }
-    ])
-  )
+      features: ['ts'],
+    },
+    {
+      code: `import { useState } from 'react';
+      const [color, setFlavor] = useState<string>('#ffffff')`,
+      errors: [{
+        message: 'setState call is not destructured into value + setter pair',
+      }],
+      output: `import { useState } from 'react';
+      const [color, setColor] = useState<string>('#ffffff')`,
+      features: ['ts'],
+    },
+    {
+      code: `import React from 'react';
+      const [color, setFlavor] = React.useState<string>('#ffffff')`,
+      errors: [{
+        message: 'setState call is not destructured into value + setter pair',
+      }],
+      output: `import React from 'react';
+      const [color, setColor] = React.useState<string>('#ffffff')`,
+      features: ['ts'],
+    },
+  ]),
 };
 
 ruleTester.run('hook-set-state-names', rule, tests);