[Fix] jsx-no-useless-fragment: avoid a crash when autofixing a self…

…-closing React.Fragment Fixes #2680.
jsx-eslint · Jun 29, 2020 · d2a131a · d2a131a
1 parent a9d2621
commit d2a131a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/lib/rules/jsx-no-useless-fragment.js b/lib/rules/jsx-no-useless-fragment.js
@@ -172,7 +172,8 @@ module.exports = {
       return function fix(fixer) {
         const opener = node.type === 'JSXFragment' ? node.openingFragment : node.openingElement;
         const closer = node.type === 'JSXFragment' ? node.closingFragment : node.closingElement;
-        const childrenText = context.getSourceCode().getText().slice(opener.range[1], closer.range[0]);
+
+        const childrenText = opener.selfClosing ? '' : context.getSourceCode().getText().slice(opener.range[1], closer.range[0]);
 
         return fixer.replaceText(node, trimLikeReact(childrenText));
       };

diff --git a/tests/lib/rules/jsx-no-useless-fragment.js b/tests/lib/rules/jsx-no-useless-fragment.js
@@ -27,7 +27,7 @@ const parserOptions = {
 
 const ruleTester = new RuleTester({parserOptions});
 
-ruleTester.run('jsx-no-uselses-fragment', rule, {
+ruleTester.run('jsx-no-useless-fragment', rule, {
   valid: [
     {
       code: '<><Foo /><Bar /></>',
@@ -201,6 +201,23 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
       output: '<div>a {""}{""} a</div>',
       errors: [{messageId: 'ChildOfHtmlElement'}],
       parser: parsers.BABEL_ESLINT
+    },
+    {
+      code: `
+        const Comp = () => (
+          <html>
+            <React.Fragment />
+          </html>
+        );
+      `,
+      output: `
+        const Comp = () => (
+          <html>
+            ${/* the trailing whitespace here is intentional */ ''}
+          </html>
+        );
+      `,
+      errors: [{messageId: 'NeedsMoreChidren'}, {messageId: 'ChildOfHtmlElement'}]
     }
   ]
 });