Merge pull request #2113 from alexzherdev/2112-fix-self-closing-fragments

[Fix] `jsx-fragments`: avoid crashing on self-closing fragments

Author: ljharb

lib/rules/jsx-fragments.js

@@ -71,10 +71,18 @@ module.exports = {
     function getFixerToShort(jsxElement) {
       return function(fixer) {
         let source = sourceCode.getText();
-        source = replaceNode(source, jsxElement.closingElement, closeFragShort);
-        source = replaceNode(source, jsxElement.openingElement, openFragShort);
-        const lengthDiff = sourceCode.getText(jsxElement.openingElement).length - openFragShort.length
-          + sourceCode.getText(jsxElement.closingElement).length - closeFragShort.length;
+        let lengthDiff;
+        if (jsxElement.closingElement) {
+          source = replaceNode(source, jsxElement.closingElement, closeFragShort);
+          source = replaceNode(source, jsxElement.openingElement, openFragShort);
+          lengthDiff = sourceCode.getText(jsxElement.openingElement).length - openFragShort.length
+            + sourceCode.getText(jsxElement.closingElement).length - closeFragShort.length;
+        } else {
+          source = replaceNode(source, jsxElement.openingElement, `${openFragShort}${closeFragShort}`);
+          lengthDiff = sourceCode.getText(jsxElement.openingElement).length - openFragShort.length
+            - closeFragShort.length;
+        }
+
         const range = jsxElement.range;
         return fixer.replaceTextRange(range, source.slice(range[0], range[1] - lengthDiff));
       };

tests/lib/rules/jsx-fragments.js

@@ -49,6 +49,10 @@ ruleTester.run('jsx-fragments', rule, {
     code: '<Act.Frag><Foo /></Act.Frag>',
     options: ['element'],
     settings
+  }, {
+    code: '<Act.Frag />',
+    options: ['element'],
+    settings
   }, {
     code: `
       import Act, { Frag as F } from 'react';
@@ -81,6 +85,10 @@ ruleTester.run('jsx-fragments', rule, {
     code: '<Act.Frag key="key"><Foo /></Act.Frag>',
     options: ['syntax'],
     settings
+  }, {
+    code: '<Act.Frag key="key" />',
+    options: ['syntax'],
+    settings
   }],
 
   invalid: [{
@@ -98,6 +106,13 @@ ruleTester.run('jsx-fragments', rule, {
       message: 'Fragments are only supported starting from React v16.2. '
         + 'Please disable the `react/jsx-fragments` rule in ESLint settings or upgrade your version of React.'
     }]
+  }, {
+    code: '<Act.Frag />',
+    settings: settingsOld,
+    errors: [{
+      message: 'Fragments are only supported starting from React v16.2. '
+        + 'Please disable the `react/jsx-fragments` rule in ESLint settings or upgrade your version of React.'
+    }]
   }, {
     code: '<><Foo /></>',
     parser: 'babel-eslint',
@@ -115,6 +130,28 @@ ruleTester.run('jsx-fragments', rule, {
       message: 'Prefer fragment shorthand over Act.Frag'
     }],
     output: '<><Foo /></>'
+  }, {
+    code: '<Act.Frag />',
+    options: ['syntax'],
+    settings,
+    errors: [{
+      message: 'Prefer fragment shorthand over Act.Frag'
+    }],
+    output: '<></>'
+  }, {
+    code: `
+      import Act, { Frag as F } from 'react';
+      <F />;
+    `,
+    options: ['syntax'],
+    settings,
+    errors: [{
+      message: 'Prefer fragment shorthand over Act.Frag'
+    }],
+    output: `
+      import Act, { Frag as F } from 'react';
+      <></>;
+    `
   }, {
     code: `
       import Act, { Frag as F } from 'react';