From a186f7b96261c31cc601ab4b5f39fb4e67a7586f Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Mon, 12 Feb 2024 11:09:40 +1000
Subject: [PATCH 1/3] fix: remove DOM elements even if component creation fails

Fixes #190
---
 .../__snapshots__/render.test.js.snap         |  1 -
 src/__tests__/cleanup.test.js                 | 30 ++++++++
 src/__tests__/fixtures/Mounter.svelte         |  2 +-
 src/pure.js                                   | 68 +++++++++----------
 vite.config.js                                |  2 +-
 5 files changed, 65 insertions(+), 38 deletions(-)
 create mode 100644 src/__tests__/cleanup.test.js

diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap
index a31cf2e..e6c67fa 100644
--- a/src/__tests__/__snapshots__/render.test.js.snap
+++ b/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>
diff --git a/src/__tests__/cleanup.test.js b/src/__tests__/cleanup.test.js
new file mode 100644
index 0000000..7abd1dd
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/__tests__/fixtures/Mounter.svelte b/src/__tests__/fixtures/Mounter.svelte
index 477bb34..ba7cf7a 100644
--- a/src/__tests__/fixtures/Mounter.svelte
+++ b/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
diff --git a/src/pure.js b/src/pure.js
index 6d49434..6a5791e 100644
--- a/src/pure.js
+++ b/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) => {
diff --git a/vite.config.js b/vite.config.js
index 4baf76f..0ad04cc 100644
--- a/vite.config.js
+++ b/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

From 150335aac28f071710ca5771d4dc2a4f7363633c Mon Sep 17 00:00:00 2001
From: Mike Cousins <mike@cousins.io>
Date: Sun, 11 Feb 2024 19:57:24 -0500
Subject: [PATCH 2/3] feat: add Svelte v5-next support

---
 .github/workflows/release.yml                 | 12 ++++
 package.json                                  |  8 +--
 .../__snapshots__/render.test.js.snap         | 26 +++++++-
 src/__tests__/cleanup.test.js                 | 17 ++++--
 src/__tests__/fixtures/Mounter.svelte         | 16 +++--
 src/__tests__/mount.test.js                   | 26 ++++----
 src/__tests__/render.test.js                  | 61 ++++++++++++-------
 src/__tests__/rerender.test.js                | 23 +++----
 src/__tests__/transition.test.js              |  3 +-
 src/pure.js                                   | 40 ++++++------
 10 files changed, 149 insertions(+), 83 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index e218a53..4bb6e56 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -16,11 +16,23 @@ jobs:
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
     name: Node ${{ matrix.node }}, Svelte ${{ matrix.svelte }}, ${{ matrix.test-runner }}
     runs-on: ubuntu-latest
+    continue-on-error: ${{ matrix.experimental }}
     strategy:
+      fail-fast: false
       matrix:
         node: ['16', '18', '20']
         svelte: ['3', '4']
         test-runner: ['vitest:jsdom', 'vitest:happy-dom']
+        experimental: [false]
+        include:
+          - node: '20'
+            svelte: 'next'
+            test-runner: 'vitest:jsdom'
+            experimental: true
+          - node: '20'
+            svelte: 'next'
+            test-runner: 'vitest:happy-dom'
+            experimental: true
 
     steps:
       - name: ⬇️ Checkout repo
diff --git a/package.json b/package.json
index 20bc1c2..938f563 100644
--- a/package.json
+++ b/package.json
@@ -64,13 +64,13 @@
     "contributors:generate": "all-contributors generate"
   },
   "peerDependencies": {
-    "svelte": "^3 || ^4"
+    "svelte": "^3 || ^4 || ^5"
   },
   "dependencies": {
     "@testing-library/dom": "^9.3.1"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@typescript-eslint/eslint-plugin": "6.19.1",
@@ -94,11 +94,11 @@
     "npm-run-all": "^4.1.5",
     "prettier": "3.2.4",
     "prettier-plugin-svelte": "3.1.2",
-    "svelte": "^3 || ^4",
+    "svelte": "^4.2.10",
     "svelte-check": "^3.6.3",
     "svelte-jester": "^3.0.0",
     "typescript": "^5.3.3",
-    "vite": "^4.3.9",
+    "vite": "^5.1.1",
     "vitest": "^0.33.0"
   }
 }
diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap
index e6c67fa..b9eb849 100644
--- a/src/__tests__/__snapshots__/render.test.js.snap
+++ b/src/__tests__/__snapshots__/render.test.js.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`render > should accept svelte component options 1`] = `
+exports[`render > should accept svelte v4 component options 1`] = `
 <body>
   <div>
     <h1
@@ -22,3 +22,27 @@ exports[`render > should accept svelte component options 1`] = `
   </div>
 </body>
 `;
+
+exports[`render > should accept svelte v5 component options 1`] = `
+<body>
+  
+  
+  
+  <section>
+    <h1
+      data-testid="test"
+    >
+      Hello World!
+    </h1>
+     
+    <div>
+      we have context
+    </div>
+     
+    <button>
+      Button
+    </button>
+    
+  </section>
+</body>
+`;
diff --git a/src/__tests__/cleanup.test.js b/src/__tests__/cleanup.test.js
index 7abd1dd..789338d 100644
--- a/src/__tests__/cleanup.test.js
+++ b/src/__tests__/cleanup.test.js
@@ -1,24 +1,29 @@
 import { describe, expect, test, vi } from 'vitest'
 
-import { cleanup, render } from '..'
+import { act, cleanup, render } from '..'
 import Mounter from './fixtures/Mounter.svelte'
 
-const onMounted = vi.fn()
+const onExecuted = vi.fn()
 const onDestroyed = vi.fn()
-const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
+const renderSubject = () => render(Mounter, { onExecuted, onDestroyed })
 
 describe('cleanup', () => {
-  test('cleanup unmounts component and deletes element', () => {
+  test('cleanup deletes element', async () => {
     renderSubject()
+    cleanup()
 
+    expect(document.body).toBeEmptyDOMElement()
+  })
+
+  test('cleanup unmounts component', async () => {
+    await act(renderSubject)
     cleanup()
 
     expect(onDestroyed).toHaveBeenCalledOnce()
-    expect(document.body).toBeEmptyDOMElement()
   })
 
   test('cleanup handles unexpected errors during mount', () => {
-    onMounted.mockImplementation(() => {
+    onExecuted.mockImplementation(() => {
       throw new Error('oh no!')
     })
 
diff --git a/src/__tests__/fixtures/Mounter.svelte b/src/__tests__/fixtures/Mounter.svelte
index ba7cf7a..51ebcd8 100644
--- a/src/__tests__/fixtures/Mounter.svelte
+++ b/src/__tests__/fixtures/Mounter.svelte
@@ -1,11 +1,19 @@
 <script>
   import { onDestroy, onMount } from 'svelte'
 
-  export let onMounted
-  export let onDestroyed
+  export let onExecuted = undefined
+  export let onMounted = undefined
+  export let onDestroyed = undefined
 
-  onMount(() => onMounted())
-  onDestroy(() => onDestroyed())
+  onExecuted?.()
+
+  onMount(() => {
+    onMounted?.()
+  })
+
+  onDestroy(() => {
+    onDestroyed?.()
+  })
 </script>
 
 <button />
diff --git a/src/__tests__/mount.test.js b/src/__tests__/mount.test.js
index 830b513..898aa6a 100644
--- a/src/__tests__/mount.test.js
+++ b/src/__tests__/mount.test.js
@@ -3,31 +3,31 @@ import { describe, expect, test, vi } from 'vitest'
 import { act, render, screen } from '..'
 import Mounter from './fixtures/Mounter.svelte'
 
-describe('mount and destroy', () => {
-  const handleMount = vi.fn()
-  const handleDestroy = vi.fn()
+const onMounted = vi.fn()
+const onDestroyed = vi.fn()
+const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
 
+describe('mount and destroy', () => {
   test('component is mounted', async () => {
-    await act(() => {
-      render(Mounter, { onMounted: handleMount, onDestroyed: handleDestroy })
-    })
+    renderSubject()
 
     const content = screen.getByRole('button')
 
-    expect(handleMount).toHaveBeenCalledOnce()
     expect(content).toBeInTheDocument()
+    await act()
+    expect(onMounted).toHaveBeenCalledOnce()
   })
 
   test('component is destroyed', async () => {
-    const { unmount } = render(Mounter, {
-      onMounted: handleMount,
-      onDestroyed: handleDestroy,
-    })
+    const { unmount } = renderSubject()
+
+    await act()
+    unmount()
 
-    await act(() => unmount())
     const content = screen.queryByRole('button')
 
-    expect(handleDestroy).toHaveBeenCalledOnce()
     expect(content).not.toBeInTheDocument()
+    await act()
+    expect(onDestroyed).toHaveBeenCalledOnce()
   })
 })
diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js
index 6beb984..262e062 100644
--- a/src/__tests__/render.test.js
+++ b/src/__tests__/render.test.js
@@ -1,3 +1,4 @@
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { beforeEach, describe, expect, test } from 'vitest'
 
 import { act, render as stlRender } from '..'
@@ -11,13 +12,13 @@ describe('render', () => {
     return stlRender(Comp, {
       target: document.body,
       props,
-      ...additional
+      ...additional,
     })
   }
 
   beforeEach(() => {
     props = {
-      name: 'World'
+      name: 'World',
     }
   })
 
@@ -41,7 +42,9 @@ describe('render', () => {
   })
 
   test('change props with accessors', async () => {
-    const { component, getByText } = render({ accessors: true })
+    const { component, getByText } = render(
+      SVELTE_VERSION < '5' ? { accessors: true } : {}
+    )
 
     expect(getByText('Hello World!')).toBeInTheDocument()
 
@@ -59,23 +62,41 @@ describe('render', () => {
     expect(getByText('Hello World!')).toBeInTheDocument()
   })
 
-  test('should accept svelte component options', () => {
-    const target = document.createElement('div')
-    const div = document.createElement('div')
-    document.body.appendChild(target)
-    target.appendChild(div)
-    const { container } = stlRender(Comp, {
-      target,
-      anchor: div,
-      props: { name: 'World' },
-      context: new Map([['name', 'context']])
-    })
-    expect(container).toMatchSnapshot()
-  })
+  test.runIf(SVELTE_VERSION < '5')(
+    'should accept svelte v4 component options',
+    () => {
+      const target = document.createElement('div')
+      const div = document.createElement('div')
+      document.body.appendChild(target)
+      target.appendChild(div)
+      const { container } = stlRender(Comp, {
+        target,
+        anchor: div,
+        props: { name: 'World' },
+        context: new Map([['name', 'context']]),
+      })
+      expect(container).toMatchSnapshot()
+    }
+  )
+
+  test.runIf(SVELTE_VERSION >= '5')(
+    'should accept svelte v5 component options',
+    () => {
+      const target = document.createElement('section')
+      document.body.appendChild(target)
+
+      const { container } = stlRender(Comp, {
+        target,
+        props: { name: 'World' },
+        context: new Map([['name', 'context']]),
+      })
+      expect(container).toMatchSnapshot()
+    }
+  )
 
   test('should throw error when mixing svelte component options and props', () => {
     expect(() => {
-      stlRender(Comp, { anchor: '', name: 'World' })
+      stlRender(Comp, { props: {}, name: 'World' })
     }).toThrow(/Unknown options were found/)
   })
 
@@ -93,10 +114,8 @@ describe('render', () => {
 
   test("accept the 'context' option", () => {
     const { getByText } = stlRender(Comp, {
-      props: {
-        name: 'Universe'
-      },
-      context: new Map([['name', 'context']])
+      props: { name: 'Universe' },
+      context: new Map([['name', 'context']]),
     })
 
     expect(getByText('we have context')).toBeInTheDocument()
diff --git a/src/__tests__/rerender.test.js b/src/__tests__/rerender.test.js
index e3eddb2..af58790 100644
--- a/src/__tests__/rerender.test.js
+++ b/src/__tests__/rerender.test.js
@@ -1,10 +1,8 @@
-/**
- * @jest-environment jsdom
- */
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 
-import { render } from '..'
+import { act, render } from '..'
 import Comp from './fixtures/Comp.svelte'
+import Mounter from './fixtures/Mounter.svelte'
 
 describe('rerender', () => {
   test('mounts new component successfully', () => {
@@ -15,16 +13,13 @@ describe('rerender', () => {
     expect(container.firstChild).toHaveTextContent('Hello World 2!')
   })
 
-  test('destroys old component', () => {
-    let isDestroyed
+  test('destroys old component', async () => {
+    const onDestroyed = vi.fn()
+    const { rerender } = render(Mounter, { onDestroyed })
 
-    const { rerender, component } = render(Comp, { props: { name: '' } })
-
-    component.$$.on_destroy.push(() => {
-      isDestroyed = true
-    })
-    rerender({ props: { name: '' } })
-    expect(isDestroyed).toBeTruthy()
+    await act()
+    await act(() => rerender({}))
+    expect(onDestroyed).toHaveBeenCalledOnce()
   })
 
   test('destroys old components on multiple rerenders', () => {
diff --git a/src/__tests__/transition.test.js b/src/__tests__/transition.test.js
index 5b1ff18..e8191f5 100644
--- a/src/__tests__/transition.test.js
+++ b/src/__tests__/transition.test.js
@@ -1,10 +1,11 @@
 import { userEvent } from '@testing-library/user-event'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import { render, screen, waitFor } from '..'
 import Transitioner from './fixtures/Transitioner.svelte'
 
-describe('transitions', () => {
+describe.runIf(SVELTE_VERSION < '5')('transitions', () => {
   beforeEach(() => {
     if (window.navigator.userAgent.includes('jsdom')) {
       const raf = (fn) => setTimeout(() => fn(new Date()), 16)
diff --git a/src/pure.js b/src/pure.js
index 6a5791e..01a1ccc 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -3,19 +3,15 @@ import {
   getQueriesForElement,
   prettyDOM,
 } from '@testing-library/dom'
-import { tick } from 'svelte'
+import * as Svelte from 'svelte'
 
+const IS_SVELTE_5 = typeof Svelte.createRoot === 'function'
 const targetCache = new Set()
 const componentCache = new Set()
 
-const svelteComponentOptions = [
-  'accessors',
-  'anchor',
-  'props',
-  'hydrate',
-  'intro',
-  'context',
-]
+const svelteComponentOptions = IS_SVELTE_5
+  ? ['target', 'props', 'events', 'context', 'intro', 'recover']
+  : ['accessors', 'anchor', 'props', 'hydrate', 'intro', 'context']
 
 const render = (
   Component,
@@ -56,15 +52,21 @@ const render = (
   }
 
   const renderComponent = (options) => {
-    const component = new ComponentConstructor({
-      target,
-      ...checkProps(options),
-    })
+    options = { target, ...checkProps(options) }
+
+    const component = IS_SVELTE_5
+      ? Svelte.createRoot(ComponentConstructor, options)
+      : new ComponentConstructor(options)
 
     componentCache.add(component)
-    component.$$.on_destroy.push(() => {
-      componentCache.delete(component)
-    })
+
+    // TODO(mcous, 2024-02-11): remove this behavior in the next major version
+    // It is unnecessary has no path to implementation in Svelte v5
+    if (!IS_SVELTE_5) {
+      component.$$.on_destroy.push(() => {
+        componentCache.delete(component)
+      })
+    }
 
     return component
   }
@@ -111,19 +113,19 @@ const act = async (fn) => {
   if (fn) {
     await fn()
   }
-  return tick()
+  return Svelte.tick()
 }
 
 const fireEvent = async (...args) => {
   const event = dtlFireEvent(...args)
-  await tick()
+  await Svelte.tick()
   return event
 }
 
 Object.keys(dtlFireEvent).forEach((key) => {
   fireEvent[key] = async (...args) => {
     const event = dtlFireEvent[key](...args)
-    await tick()
+    await Svelte.tick()
     return event
   }
 })

From 1aa2899d74e587dfb77d955ff8aa15fc0a47c7d6 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Tue, 13 Feb 2024 10:14:46 -0500
Subject: [PATCH 3/3] Merge branch 'next' into pr/321

---
 src/__tests__/fixtures/Rerender.svelte | 17 ++++++++
 src/__tests__/rerender.test.js         | 54 +++++++++++++++-----------
 src/pure.js                            | 12 ++++--
 types/index.d.ts                       | 45 +++++++++++++++------
 4 files changed, 91 insertions(+), 37 deletions(-)
 create mode 100644 src/__tests__/fixtures/Rerender.svelte

diff --git a/src/__tests__/fixtures/Rerender.svelte b/src/__tests__/fixtures/Rerender.svelte
new file mode 100644
index 0000000..1a3fa24
--- /dev/null
+++ b/src/__tests__/fixtures/Rerender.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+
+  export let onExecuted = undefined
+  export let onMounted = undefined
+  export let onDestroyed = undefined
+
+  export let name = ''
+
+  onExecuted?.()
+
+  onMount(() => onMounted?.())
+
+  onDestroy(() => onDestroyed?.())
+</script>
+
+<div data-testid="test">Hello {name}!</div>
diff --git a/src/__tests__/rerender.test.js b/src/__tests__/rerender.test.js
index af58790..922ea63 100644
--- a/src/__tests__/rerender.test.js
+++ b/src/__tests__/rerender.test.js
@@ -1,33 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
 import { describe, expect, test, vi } from 'vitest'
+import { writable } from 'svelte/store'
 
-import { act, render } from '..'
-import Comp from './fixtures/Comp.svelte'
-import Mounter from './fixtures/Mounter.svelte'
+import { act, render, waitFor } from '..'
+import Comp from './fixtures/Rerender.svelte'
 
-describe('rerender', () => {
-  test('mounts new component successfully', () => {
-    const { container, rerender } = render(Comp, { props: { name: 'World 1' } })
+test('mounts new component successfully', async () => {
+  const onMounted = vi.fn()
+  const onDestroyed = vi.fn()
 
-    expect(container.firstChild).toHaveTextContent('Hello World 1!')
-    rerender({ props: { name: 'World 2' } })
-    expect(container.firstChild).toHaveTextContent('Hello World 2!')
+  const { getByTestId, rerender } = render(Comp, {
+    props: { name: 'World 1', onMounted, onDestroyed },
   })
 
-  test('destroys old component', async () => {
-    const onDestroyed = vi.fn()
-    const { rerender } = render(Mounter, { onDestroyed })
+  const expectToRender = (content) =>
+    waitFor(() => {
+      expect(getByTestId('test')).toHaveTextContent(content)
+      expect(onMounted).toHaveBeenCalledOnce()
+    })
 
-    await act()
-    await act(() => rerender({}))
-    expect(onDestroyed).toHaveBeenCalledOnce()
-  })
+  await expectToRender('Hello World 1!')
 
-  test('destroys old components on multiple rerenders', () => {
-    const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } })
+  console.warn = vi.fn()
 
-    rerender({ props: { name: 'Alex' } })
-    expect(queryByText('Hello Neil!')).not.toBeInTheDocument()
-    rerender({ props: { name: 'Geddy' } })
-    expect(queryByText('Hello Alex!')).not.toBeInTheDocument()
-  })
+  rerender({ props: { name: 'World 2' } })
+  await expectToRender('Hello World 2!')
+  expect(onDestroyed).not.toHaveBeenCalled()
+
+  expect(console.warn).toHaveBeenCalledOnce()
+
+  console.warn.mockClear()
+  onDestroyed.mockReset()
+  rerender({ name: 'World 3' })
+  await expectToRender('Hello World 3!')
+  expect(onDestroyed).not.toHaveBeenCalled()
+
+  expect(console.warn).not.toHaveBeenCalled()
 })
diff --git a/src/pure.js b/src/pure.js
index 01a1ccc..a672b64 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -77,9 +77,15 @@ const render = (
     container,
     component,
     debug: (el = container) => console.log(prettyDOM(el)),
-    rerender: (options) => {
-      cleanupComponent(component)
-      component = renderComponent(options)
+    rerender: async (props) => {
+      if (props.props) {
+        console.warn(
+          'rerender({ props: {...} }) deprecated, use rerender({...}) instead'
+        )
+        props = props.props
+      }
+      component.$set(props)
+      await Svelte.tick()
     },
     unmount: () => {
       cleanupComponent(component)
diff --git a/types/index.d.ts b/types/index.d.ts
index 26d85d7..d60d779 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -2,25 +2,42 @@
 // Project: https://github.com/testing-library/svelte-testing-library
 // Definitions by: Rahim Alwer <https://github.com/mihar-22>
 
-import {BoundFunction, EventType,Queries, queries} from '@testing-library/dom'
-import { ComponentConstructorOptions,ComponentProps, SvelteComponent  } from 'svelte'
+import {
+  BoundFunction,
+  EventType,
+  Queries,
+  queries,
+} from '@testing-library/dom'
+import {
+  ComponentConstructorOptions,
+  ComponentProps,
+  SvelteComponent,
+} from 'svelte'
 
 export * from '@testing-library/dom'
 
-type SvelteComponentOptions<C extends SvelteComponent> = ComponentProps<C> | Pick<ComponentConstructorOptions<ComponentProps<C>>, "anchor" | "props" | "hydrate" | "intro" | "context">
+type SvelteComponentOptions<C extends SvelteComponent> =
+  | ComponentProps<C>
+  | Pick<
+      ComponentConstructorOptions<ComponentProps<C>>,
+      'anchor' | 'props' | 'hydrate' | 'intro' | 'context'
+    >
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
-type Constructor<T> = new (...args: any[]) => T;
+type Constructor<T> = new (...args: any[]) => T
 
 /**
  * Render a Component into the Document.
  */
-export type RenderResult<C extends SvelteComponent, Q extends Queries = typeof queries> = {
+export type RenderResult<
+  C extends SvelteComponent,
+  Q extends Queries = typeof queries,
+> = {
   container: HTMLElement
   component: C
   debug: (el?: HTMLElement | DocumentFragment) => void
-  rerender: (options: SvelteComponentOptions<C>) => void
+  rerender: (props: ComponentProps<C>) => Promise<void>
   unmount: () => void
 } & { [P in keyof Q]: BoundFunction<Q[P]> }
 
@@ -38,7 +55,7 @@ export function render<C extends SvelteComponent>(
 export function render<C extends SvelteComponent, Q extends Queries>(
   component: Constructor<C>,
   componentOptions?: SvelteComponentOptions<C>,
-  renderOptions?: RenderOptions<Q>,
+  renderOptions?: RenderOptions<Q>
 ): RenderResult<C, Q>
 
 /**
@@ -50,13 +67,19 @@ export function cleanup(): void
  * Fires DOM events on an element provided by @testing-library/dom. Since Svelte needs to flush
  * pending state changes via `tick`, these methods have been override and now return a promise.
  */
-export type FireFunction = (element: Document | Element | Window, event: Event) => Promise<boolean>;
+export type FireFunction = (
+  element: Document | Element | Window,
+  event: Event
+) => Promise<boolean>
 
 export type FireObject = {
-  [K in EventType]: (element: Document | Element | Window, options?: {}) => Promise<boolean>;
-};
+  [K in EventType]: (
+    element: Document | Element | Window,
+    options?: {}
+  ) => Promise<boolean>
+}
 
-export const fireEvent: FireFunction & FireObject;
+export const fireEvent: FireFunction & FireObject
 
 /**
  * Calls a function and notifies Svelte to flush any pending state changes.