Insertafter jsx fix (#8833)

* Add check for JSXElement

* Add test

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

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

packages/babel-traverse/test/modification.js

@@ -200,6 +200,32 @@ describe("modification", function() {
       );
     });
 
+    it("returns inserted path with nested JSXElement", function() {
+      const ast = parse("<div><span>foo</span></div>", {
+        plugins: ["jsx"],
+      });
+      let path;
+      traverse(ast, {
+        Program: function(_path) {
+          path = _path.get("body.0");
+        },
+        JSXElement: function(path) {
+          const tagName = path.node.openingElement.name.name;
+          if (tagName !== "span") return;
+          path.insertAfter(
+            t.JSXElement(
+              t.JSXOpeningElement(t.JSXIdentifier("div"), [], false),
+              t.JSXClosingElement(t.JSXIdentifier("div")),
+              [],
+            ),
+          );
+        },
+      });
+      expect(generateCode(path)).toBe(
+        "<div><span>foo</span><div></div></div>;",
+      );
+    });
+
     describe("when the parent is an export declaration inserts the node after", function() {
       it("the ExportNamedDeclaration", function() {
         const bodyPath = getPath("export function a() {}", {