Handle fragments in jsx-key

Author: kaykayehnn

lib/rules/jsx-key.js

@@ -31,6 +31,11 @@ module.exports = {
           node,
           message: 'Missing "key" prop for element in iterator'
         });
+      } else if (node.type === 'JSXFragment') {
+        context.report({
+          node,
+          message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'
+        });
       }
     }
 
@@ -52,6 +57,15 @@ module.exports = {
         }
       },
 
+      JSXFragment(node) {
+        if (node.parent.type === 'ArrayExpression') {
+          context.report({
+            node,
+            message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'
+          });
+        }
+      },
+
       // Array.prototype.map
       CallExpression(node) {
         if (node.callee && node.callee.type !== 'MemberExpression') {
@@ -66,7 +80,7 @@ module.exports = {
         const isFn = fn && fn.type === 'FunctionExpression';
         const isArrFn = fn && fn.type === 'ArrowFunctionExpression';
 
-        if (isArrFn && fn.body.type === 'JSXElement') {
+        if (isArrFn && (fn.body.type === 'JSXElement' || fn.body.type === 'JSXFragment')) {
           checkIteratorElement(fn.body);
         }
 

tests/lib/rules/jsx-key.js

@@ -37,7 +37,9 @@ ruleTester.run('jsx-key', rule, {
     {code: '[1, 2, 3].foo(x => <App />);'},
     {code: 'var App = () => <div />;'},
     {code: '[1, 2, 3].map(function(x) { return; });'},
-    {code: 'foo(() => <div />);'}
+    {code: 'foo(() => <div />);'},
+    {code: 'foo(() => <></>);'},
+    {code: '<></>;'}
   ],
   invalid: [{
     code: '[<App />];',
@@ -57,5 +59,11 @@ ruleTester.run('jsx-key', rule, {
   }, {
     code: '[1, 2 ,3].map(x => { return <App /> });',
     errors: [{message: 'Missing "key" prop for element in iterator'}]
+  }, {
+    code: '[1, 2, 3].map(x => <>{x}</>);',
+    errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'}]
+  }, {
+    code: '[<></>];',
+    errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'}]
   }]
 });