fix: remove DOM elements even if component creation fails

src/__tests__/__snapshots__/render.test.js.snap

@@ -18,7 +18,6 @@ exports[`render > should accept svelte component options 1`] = `
     <button>
       Button
     </button>
-    <!--&lt;Comp&gt;-->
     <div />
   </div>
 </body>

src/__tests__/cleanup.test.js

@@ -0,0 +1,30 @@
+import { describe, expect, test, vi } from 'vitest'
+
+import { cleanup, render } from '..'
+import Mounter from './fixtures/Mounter.svelte'
+
+const onMounted = vi.fn()
+const onDestroyed = vi.fn()
+const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
+
+describe('cleanup', () => {
+  test('cleanup unmounts component and deletes element', () => {
+    renderSubject()
+
+    cleanup()
+
+    expect(onDestroyed).toHaveBeenCalledOnce()
+    expect(document.body).toBeEmptyDOMElement()
+  })
+
+  test('cleanup handles unexpected errors during mount', () => {
+    onMounted.mockImplementation(() => {
+      throw new Error('oh no!')
+    })
+
+    expect(renderSubject).toThrowError()
+    cleanup()
+
+    expect(document.body).toBeEmptyDOMElement()
+  })
+})

src/__tests__/fixtures/Mounter.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onDestroy,onMount } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
 
   export let onMounted
   export let onDestroyed

src/pure.js

@@ -1,11 +1,11 @@
 import {
   fireEvent as dtlFireEvent,
   getQueriesForElement,
-  prettyDOM
+  prettyDOM,
 } from '@testing-library/dom'
 import { tick } from 'svelte'
 
-const containerCache = new Set()
+const targetCache = new Set()
 const componentCache = new Set()
 
 const svelteComponentOptions = [
@@ -14,7 +14,7 @@ const svelteComponentOptions = [
   'props',
   'hydrate',
   'intro',
-  'context'
+  'context',
 ]
 
 const render = (
@@ -24,6 +24,7 @@ const render = (
 ) => {
   container = container || document.body
   target = target || container.appendChild(document.createElement('div'))
+  targetCache.add(target)
 
   const ComponentConstructor = Component.default || Component
 
@@ -54,59 +55,56 @@ const render = (
     return { props: options }
   }
 
-  let component = new ComponentConstructor({
-    target,
-    ...checkProps(options)
-  })
+  const renderComponent = (options) => {
+    const component = new ComponentConstructor({
+      target,
+      ...checkProps(options),
+    })
 
-  containerCache.add({ container, target, component })
-  componentCache.add(component)
+    componentCache.add(component)
+    component.$$.on_destroy.push(() => {
+      componentCache.delete(component)
+    })
 
-  component.$$.on_destroy.push(() => {
-    componentCache.delete(component)
-  })
+    return component
+  }
+
+  let component = renderComponent(options)
 
   return {
     container,
     component,
     debug: (el = container) => console.log(prettyDOM(el)),
     rerender: (options) => {
-      if (componentCache.has(component)) component.$destroy()
-
-      // eslint-disable-next-line no-new
-      component = new ComponentConstructor({
-        target,
-        ...checkProps(options)
-      })
-
-      containerCache.add({ container, target, component })
-      componentCache.add(component)
-
-      component.$$.on_destroy.push(() => {
-        componentCache.delete(component)
-      })
+      cleanupComponent(component)
+      component = renderComponent(options)
     },
     unmount: () => {
-      if (componentCache.has(component)) component.$destroy()
+      cleanupComponent(component)
     },
-    ...getQueriesForElement(container, queries)
+    ...getQueriesForElement(container, queries),
   }
 }
 
-const cleanupAtContainer = (cached) => {
-  const { target, component } = cached
+const cleanupComponent = (component) => {
+  const inCache = componentCache.delete(component)
 
-  if (componentCache.has(component)) component.$destroy()
+  if (inCache) {
+    component.$destroy()
+  }
+}
 
-  if (target.parentNode === document.body) {
+const cleanupTarget = (target) => {
+  const inCache = targetCache.delete(target)
+
+  if (inCache && target.parentNode === document.body) {
     document.body.removeChild(target)
   }
-
-  containerCache.delete(cached)
 }
 
 const cleanup = () => {
-  Array.from(containerCache.keys()).forEach(cleanupAtContainer)
+  componentCache.forEach(cleanupComponent)
+  targetCache.forEach(cleanupTarget)
 }
 
 const act = async (fn) => {

vite.config.js

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
-  plugins: [svelte()],
+  plugins: [svelte({ hot: false })],
   resolve: {
     // Ensure `browser` exports are used in tests
     // Vitest prefers modules' `node` export by default