fix: incorrect behaviour for checkKeyMustBeforeSpread with map callbacks

jsx-eslint · Jun 18, 2024 · 483ae9e · 483ae9e
1 parent 393bfa2
commit 483ae9e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/lib/rules/jsx-key.js b/lib/rules/jsx-key.js
@@ -73,11 +73,35 @@ module.exports = {
     const reactPragma = pragmaUtil.getFromContext(context);
     const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
 
+    function isKeyAfterSpread(attributes) {
+      let hasFoundSpread = false;
+      return attributes.some((attribute) => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+          hasFoundSpread = true;
+          return false;
+        }
+        if (attribute.type !== 'JSXAttribute') {
+          return false;
+        }
+        return hasFoundSpread && propName(attribute) === 'key';
+      });
+    }
+
     function checkIteratorElement(node) {
-      if (node.type === 'JSXElement' && !hasProp(node.openingElement.attributes, 'key')) {
-        report(context, messages.missingIterKey, 'missingIterKey', {
-          node,
-        });
+      if (node.type === 'JSXElement') {
+        if (!hasProp(node.openingElement.attributes, 'key')) {
+          report(context, messages.missingIterKey, 'missingIterKey', {
+            node,
+          });
+        } else {
+          const attrs = node.openingElement.attributes;
+
+          if (checkKeyMustBeforeSpread && isKeyAfterSpread(attrs)) {
+            report(context, messages.keyBeforeSpread, 'keyBeforeSpread', {
+              node: node.type === 'ArrayExpression' ? node : node.parent,
+            });
+          }
+        }
       } else if (checkFragmentShorthand && node.type === 'JSXFragment') {
         report(context, messages.missingIterKeyUsePrag, 'missingIterKeyUsePrag', {
           node,
@@ -115,20 +139,6 @@ module.exports = {
       return returnStatements;
     }
 
-    function isKeyAfterSpread(attributes) {
-      let hasFoundSpread = false;
-      return attributes.some((attribute) => {
-        if (attribute.type === 'JSXSpreadAttribute') {
-          hasFoundSpread = true;
-          return false;
-        }
-        if (attribute.type !== 'JSXAttribute') {
-          return false;
-        }
-        return hasFoundSpread && propName(attribute) === 'key';
-      });
-    }
-
     /**
      * Checks if the given node is a function expression or arrow function,
      * and checks if there is a missing key prop in return statement's arguments

diff --git a/tests/lib/rules/jsx-key.js b/tests/lib/rules/jsx-key.js
@@ -409,5 +409,20 @@ ruleTester.run('jsx-key', rule, {
         { messageId: 'missingIterKey' },
       ],
     },
+    {
+      code: `
+        const TestCase = () => {
+          const list = [1, 2, 3, 4, 5];
+
+          return (
+            <div>
+              {list.map(x => <div {...spread} key={x} />)}
+            </div>
+          );
+        };
+      `,
+      options: [{ checkKeyMustBeforeSpread: true }],
+      errors: [{ messageId: 'keyBeforeSpread' }],
+    },
   ]),
 });