fix: Properly clean up multi-root components (#295)

src/__tests__/auto-cleanup.js

@@ -16,3 +16,33 @@ test('renders the component', () => {
 test('cleans up after each test by default', () => {
   expect(document.body.innerHTML).toMatchInlineSnapshot(``)
 })
+
+test('renders multi-root component', () => {
+  render({
+    template: `
+      <h1>Hello World</h1>
+      <h2>Hello World</h2>
+    `,
+  })
+
+  expect(document.body.innerHTML).toMatchInlineSnapshot(`
+    <div>
+      <h1>Hello World</h1>
+      <h2>Hello World</h2>
+    </div>
+  `)
+})
+
+test('cleans up after rendering multi-root node', () => {
+  expect(document.body.innerHTML).toMatchInlineSnapshot(``)
+})
+
+test('renders single slot component', () => {
+  render({template: `<slot />`})
+
+  expect(document.body.innerHTML).toMatchInlineSnapshot(`<div></div>`)
+})
+
+test('cleans up after rendering slot component', () => {
+  expect(document.body.innerHTML).toMatchInlineSnapshot(``)
+})

src/render.js

@@ -34,7 +34,7 @@ Check out the test examples on GitHub for further details.`)
   // https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L309
   unwrapNode(wrapper.parentElement)
 
-  mountedWrappers.add(wrapper)
+  mountedWrappers.add({wrapper, container})
 
   return {
     container,
@@ -59,13 +59,15 @@ function cleanup() {
   mountedWrappers.forEach(cleanupAtWrapper)
 }
 
-function cleanupAtWrapper(wrapper) {
-  if (wrapper.element?.parentNode?.parentNode === document.body) {
-    document.body.removeChild(wrapper.element.parentNode)
+function cleanupAtWrapper(entry) {
+  const {wrapper, container} = entry
+
+  if (container.parentNode === document.body) {
+    document.body.removeChild(container)
   }
 
   wrapper.unmount()
-  mountedWrappers.delete(wrapper)
+  mountedWrappers.delete(entry)
 }
 
 export {render, cleanup}