Fix parentheses on replaceWithMultiple for JSX (#10598)

* Closes #9851 Fix parentheses on replaceWithMultiple for JSX

* Rename test

* Use generate(ast) directly

packages/babel-traverse/src/path/modification.js

@@ -115,7 +115,9 @@ export function insertAfter(nodes) {
       }),
     );
   } else if (
-    (this.isNodeType("Expression") && !this.isJSXElement()) ||
+    (this.isNodeType("Expression") &&
+      !this.isJSXElement() &&
+      !parentPath.isJSXElement()) ||
     (parentPath.isForStatement() && this.key === "init")
   ) {
     if (this.node) {

packages/babel-traverse/test/replacement.js

@@ -1,5 +1,6 @@
 import traverse from "../lib";
 import { parse } from "@babel/parser";
+import generate from "@babel/generator";
 import * as t from "@babel/types";
 
 describe("path/replacement", function() {
@@ -97,4 +98,19 @@ describe("path/replacement", function() {
       );
     });
   });
+  describe("replaceWithMultiple", () => {
+    it("does not add extra parentheses for a JSXElement with a JSXElement parent", () => {
+      const ast = parse(`<div><span><p></p><h></h></span></div>`, {
+        plugins: ["jsx"],
+      });
+      traverse(ast, {
+        JSXElement: path => {
+          if (path.node.openingElement.name.name === "span") {
+            path.replaceWithMultiple(path.node.children.filter(t.isJSXElement));
+          }
+        },
+      });
+      expect(generate(ast).code).toBe("<div><p></p><h></h></div>;");
+    });
+  });
 });