cannot run test with teleport

import { mountSuspended } from "@nuxt/test-utils/runtime";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import VDialogClose from "./dialog-close.vue";
import VDialogRoot from "./dialog-root.vue";
import VDialogTitle from "./dialog-title.vue";
import VDialogTrigger from "./dialog-trigger.vue";
import VDialog from "./dialog.vue";

const TestComponent = {
  components: {
    VDialogRoot,
    VDialogTrigger,
    VDialog,
    VDialogTitle,
    VDialogClose,
  },
  template: `
      <VDialogRoot position="center">
        <VDialogTrigger>
          <button>Open Dialog</button>
        </VDialogTrigger>
        <VDialog>
          <VDialogTitle>Dialog Heading</VDialogTitle>
          <VDialogClose>
            <button>Close</button>
          </VDialogClose>
        </VDialog>
      </VDialogRoot>
    `,
};

beforeAll(() => {
  const teleportTarget = document.createElement("div");
  teleportTarget.id = "teleports";
  document.body.appendChild(teleportTarget);
});

afterAll(() => {
  const teleportTarget = document.getElementById("teleports");
  if (teleportTarget) {
    document.body.removeChild(teleportTarget);
  }
});

describe("dialog", () => {
  it("has closed dialog on initial render", async () => {
    const DialogRoot = await mountSuspended(TestComponent, { props: { position: "center" } });
    const Dialog = DialogRoot.getComponent("VDialog");

    expect(DialogRoot.find('[data-testid="dialog-trigger"]').exists()).toBe(true);
    expect(Dialog.find('[data-testid="dialog"]').exists()).toBe(true);
  });
});