How to use `baseElement`?

[samausir]

The way I use it:

import { expect, test } from "vitest";
import { render } from "vitest-browser-svelte";
import Checkbox from "./Checkbox.svelte";

test("Checkbox check", async () => {
  const form = document.createElement("form");
  document.body.appendChild(form);

  const screen = render(
    Checkbox,
    { checked: true, name: "agreed" },
    { baseElement: form },
  );

  const formData = new FormData(form);
  expect(formData.get("agreed")).toStrictEqual("on");
});

This works fine for a single test, but as soon as I add a second test, the cleanup for the first test fails with this error:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Here's a repo with the tests:
https://github.com/samausir/base-element

[samausir]

Not the most elegant solution, but FWIW applying this patch fixes the issue for me:

diff --git a/src/pure.js b/src/pure.js
index e20ef061a59b0101422d3369d77a9f24d5ed6410..6135a2690ca2f33f3d18e934a4c231665847b695 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -13,6 +13,10 @@ const targetCache = new Set()
  * @type {Set<import('svelte').SvelteComponent>}
  */
 const componentCache = new Set()
+/**
+ * @type {HTMLElement|undefined}
+ */
+let baseElementCache;
 
 /**
  * Customize how Svelte renders the component.
@@ -57,6 +61,8 @@ const componentCache = new Set()
 function render(Component, options = {}, renderOptions = {}) {
   options = validateOptions(options)
 
+  baseElementCache = renderOptions.baseElement;
+
   const baseElement
     = renderOptions.baseElement ?? options.target ?? document.body
 
@@ -120,7 +126,7 @@ function cleanupTarget(target) {
   const inCache = targetCache.delete(target)
 
   if (inCache) {
-    document.body.removeChild(target)
+    document.body.removeChild(baseElementCache ?? target)
   }
 }