Avoid unsafe autofix when parent is a component

Author: golopot

lib/rules/jsx-no-useless-fragment.js

@@ -125,12 +125,22 @@ module.exports = {
         /^[a-z]+$/.test(node.parent.openingElement.name.name);
     }
 
+    /**
+     * @param {JSXElement|JSXFragment} node
+     * @return {boolean}
+     */
+    function isChildOfComponentElement(node) {
+      return node.parent.type === 'JSXElement' &&
+        !isChildOfHtmlElement(node) &&
+        !jsxUtil.isFragment(node.parent, reactPragma, fragmentPragma);
+    }
+
     /**
      * @param {ASTNode} node
      * @returns {boolean}
      */
     function canFix(node) {
-      // Fragments that are child elements can always be fixed
+      // Not safe to fix fragments without a jsx parent.
       if (!(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment')) {
         // const a = <></>
         if (node.children.length === 0) {
@@ -143,6 +153,11 @@ module.exports = {
         }
       }
 
+      // Not safe to fix `<Eeee><>foo</></Eeee>` because `Eeee` might require its children be a ReactElement.
+      if (isChildOfComponentElement(node)) {
+        return false;
+      }
+
       return true;
     }
 

tests/lib/rules/jsx-no-useless-fragment.js

@@ -138,8 +138,9 @@ ruleTester.run('jsx-no-uselses-fragment', rule, {
       errors: [{messageId: 'NeedsMoreChidren'}]
     },
     {
+      // Not safe to fix this case because `Eeee` might require child be ReactElement
       code: '<Eeee><>foo</></Eeee>',
-      output: '<Eeee>foo</Eeee>',
+      output: null,
       errors: [{messageId: 'NeedsMoreChidren'}],
       parser: parsers.BABEL_ESLINT
     },