fix: $destroy and createRoot are no more

README.md

@@ -80,6 +80,21 @@ This library has `peerDependencies` listings for `svelte >= 3`.
 You may also be interested in installing `@testing-library/jest-dom` so you can use
 [the custom jest matchers](https://github.com/testing-library/jest-dom).
 
+### Svelte 5 support
+
+If you are riding the bleeding edge of Svelte 5, you'll need to either
+import from `@testing-library/svelte/svelte5` instead of `@testing-library/svelte`, or have your `vite.config.js` contains the following alias:
+
+```
+export default defineConfig(({ }) => ({
+  test: {
+    alias: {
+      './pure.js': './svelte5.js'
+    }
+  },
+}))
+```
+
 ## Docs
 
 See the [**docs**](https://testing-library.com/docs/svelte-testing-library/intro) over at the Testing Library website.

package.json

@@ -4,10 +4,8 @@
   "description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
   "main": "src/index.js",
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "default": "./src/index.js"
-    },
+    ".": "./src/index.js",
+    "./svelte5": "./src/svelte5-index.js",
     "./vitest": {
       "default": "./src/vitest.js"
     }
@@ -56,8 +54,8 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:update": "vitest run --update",
-    "test:vitest:jsdom": "vitest run --coverage --environment jsdom",
-    "test:vitest:happy-dom": "vitest run --coverage --environment happy-dom",
+    "test:vitest:jsdom": "VITEST_ENV=jsdom vitest run --coverage --environment jsdom",
+    "test:vitest:happy-dom": "VITEST_ENV=happy-dom vitest run --coverage --environment happy-dom",
     "types": "svelte-check",
     "validate": "npm-run-all test:vitest:* types",
     "contributors:add": "all-contributors add",

src/__tests__/cleanup.test.js

@@ -1,4 +1,5 @@
 import { describe, expect, test, vi } from 'vitest'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 
 import { act, cleanup, render } from '..'
 import Mounter from './fixtures/Mounter.svelte'
@@ -15,7 +16,7 @@ describe('cleanup', () => {
     expect(document.body).toBeEmptyDOMElement()
   })
 
-  test('cleanup unmounts component', async () => {
+  test.runIf(SVELTE_VERSION < '5')('cleanup unmounts component', async () => {
     await act(renderSubject)
     cleanup()
 

src/__tests__/context.test.js

@@ -1,14 +1,18 @@
 import { expect, test } from 'vitest'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 
 import { render } from '..'
 import Comp from './fixtures/Context.svelte'
 
-test('can set a context', () => {
-  const message = 'Got it'
+test.skipIf(SVELTE_VERSION >= '5' && process.env.VITEST_ENV == 'happy-dom')(
+  'can set a context',
+  () => {
+    const message = 'Got it'
 
-  const { getByText } = render(Comp, {
-    context: new Map(Object.entries({ foo: { message } })),
-  })
+    const { getByText } = render(Comp, {
+      context: new Map(Object.entries({ foo: { message } })),
+    })
 
-  expect(getByText(message)).toBeTruthy()
-})
+    expect(getByText(message)).toBeTruthy()
+  }
+)

src/__tests__/mount.test.js

@@ -1,4 +1,5 @@
 import { describe, expect, test, vi } from 'vitest'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 
 import { act, render, screen } from '..'
 import Mounter from './fixtures/Mounter.svelte'
@@ -7,27 +8,30 @@ const onMounted = vi.fn()
 const onDestroyed = vi.fn()
 const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
 
-describe('mount and destroy', () => {
-  test('component is mounted', async () => {
-    renderSubject()
+describe.skipIf(SVELTE_VERSION >= '5' && process.env.VITEST_ENV == 'happy-dom')(
+  'mount and destroy',
+  () => {
+    test('component is mounted', async () => {
+      renderSubject()
 
-    const content = screen.getByRole('button')
+      const content = screen.getByRole('button')
 
-    expect(content).toBeInTheDocument()
-    await act()
-    expect(onMounted).toHaveBeenCalledOnce()
-  })
+      expect(content).toBeInTheDocument()
+      await act()
+      expect(onMounted).toHaveBeenCalledOnce()
+    })
 
-  test('component is destroyed', async () => {
-    const { unmount } = renderSubject()
+    test('component is destroyed', async () => {
+      const { unmount } = renderSubject()
 
-    await act()
-    unmount()
+      await act()
+      unmount()
 
-    const content = screen.queryByRole('button')
+      const content = screen.queryByRole('button')
 
-    expect(content).not.toBeInTheDocument()
-    await act()
-    expect(onDestroyed).toHaveBeenCalledOnce()
-  })
-})
+      expect(content).not.toBeInTheDocument()
+      await act()
+      expect(onDestroyed).toHaveBeenCalledOnce()
+    })
+  }
+)

src/__tests__/render.test.js

@@ -107,7 +107,7 @@ describe('render', () => {
   })
 
   test('correctly find component constructor on the default property', () => {
-    const { getByText } = render(CompDefault, { props: { name: 'World' } })
+    const { getByText } = stlRender(CompDefault, { props: { name: 'World' } })
 
     expect(getByText('Hello World!')).toBeInTheDocument()
   })

src/pure.js

@@ -3,12 +3,16 @@ import {
   getQueriesForElement,
   prettyDOM,
 } from '@testing-library/dom'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import * as Svelte from 'svelte'
 
-const IS_SVELTE_5 = typeof Svelte.createRoot === 'function'
+const IS_SVELTE_5 = /^5\./.test(SVELTE_VERSION)
 const targetCache = new Set()
 const componentCache = new Set()
 
+if (IS_SVELTE_5)
+  console.warn('for Svelte 5, use `@testing-library/svelte/svelte5`')
+
 const svelteComponentOptions = IS_SVELTE_5
   ? ['target', 'props', 'events', 'context', 'intro', 'recover']
   : ['accessors', 'anchor', 'props', 'hydrate', 'intro', 'context']
@@ -54,9 +58,10 @@ const render = (
   const renderComponent = (options) => {
     options = { target, ...checkProps(options) }
 
-    const component = IS_SVELTE_5
-      ? Svelte.createRoot(ComponentConstructor, options)
-      : new ComponentConstructor(options)
+    if (IS_SVELTE_5)
+      throw new Error('for Svelte 5, use `@testing-library/svelte/svelte5`')
+
+    const component = new ComponentConstructor(options)
 
     componentCache.add(component)
 

src/svelte5-index.js

@@ -0,0 +1,15 @@
+import { act, cleanup } from './svelte5.js'
+
+// If we're running in a test runner that supports afterEach
+// then we'll automatically run cleanup afterEach test
+// this ensures that tests run in isolation from each other
+// if you don't like this then either import the `pure` module
+// or set the STL_SKIP_AUTO_CLEANUP env variable to 'true'.
+if (typeof afterEach === 'function' && !process.env.STL_SKIP_AUTO_CLEANUP) {
+  afterEach(async () => {
+    await act()
+    cleanup()
+  })
+}
+
+export * from './svelte5.js'

src/svelte5.js

@@ -0,0 +1,145 @@
+import {
+  fireEvent as dtlFireEvent,
+  getQueriesForElement,
+  prettyDOM,
+} from '@testing-library/dom'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
+import { createClassComponent as createComponentSvelte5 } from 'svelte/legacy'
+import * as Svelte from 'svelte'
+
+const IS_SVELTE_5 = /^5\./.test(SVELTE_VERSION)
+const targetCache = new Set()
+const componentCache = new Set()
+
+const svelteComponentOptions = IS_SVELTE_5
+  ? ['target', 'props', 'events', 'context', 'intro', 'recover']
+  : ['accessors', 'anchor', 'props', 'hydrate', 'intro', 'context']
+
+const render = (
+  Component,
+  { target, ...options } = {},
+  { container, queries } = {}
+) => {
+  container = container || document.body
+  target = target || container.appendChild(document.createElement('div'))
+  targetCache.add(target)
+
+  const ComponentConstructor = Component.default || Component
+
+  const checkProps = (options) => {
+    const isProps = !Object.keys(options).some((option) =>
+      svelteComponentOptions.includes(option)
+    )
+
+    // Check if any props and Svelte options were accidentally mixed.
+    if (!isProps) {
+      const unrecognizedOptions = Object.keys(options).filter(
+        (option) => !svelteComponentOptions.includes(option)
+      )
+
+      if (unrecognizedOptions.length > 0) {
+        throw Error(`
+          Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed
+          passing in props with Svelte options into the render function. Valid Svelte options
+          are [${svelteComponentOptions}]. You can either change the prop names, or pass in your
+          props for that component via the \`props\` option.\n\n
+          Eg: const { /** Results **/ } = render(MyComponent, { props: { /** props here **/ } })\n\n
+        `)
+      }
+
+      return options
+    }
+
+    return { props: options }
+  }
+
+  const renderComponent = (options) => {
+    options = { target, ...checkProps(options) }
+
+    const component = IS_SVELTE_5
+      ? createComponentSvelte5({ component: ComponentConstructor, ...options })
+      : new ComponentConstructor(options)
+
+    componentCache.add(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
+  }
+
+  let component = renderComponent(options)
+
+  return {
+    container,
+    component,
+    debug: (el = container) => console.log(prettyDOM(el)),
+    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)
+    },
+    ...getQueriesForElement(container, queries),
+  }
+}
+
+const cleanupComponent = (component) => {
+  const inCache = componentCache.delete(component)
+
+  if (inCache) {
+    component.$destroy()
+  }
+}
+
+const cleanupTarget = (target) => {
+  const inCache = targetCache.delete(target)
+
+  if (inCache && target.parentNode === document.body) {
+    document.body.removeChild(target)
+  }
+}
+
+const cleanup = () => {
+  componentCache.forEach(cleanupComponent)
+  targetCache.forEach(cleanupTarget)
+}
+
+const act = async (fn) => {
+  if (fn) {
+    await fn()
+  }
+  return Svelte.tick()
+}
+
+const fireEvent = async (...args) => {
+  const event = dtlFireEvent(...args)
+  await Svelte.tick()
+  return event
+}
+
+Object.keys(dtlFireEvent).forEach((key) => {
+  fireEvent[key] = async (...args) => {
+    const event = dtlFireEvent[key](...args)
+    await Svelte.tick()
+    return event
+  }
+})
+
+/* eslint-disable import/export */
+
+export * from '@testing-library/dom'
+
+export { render, cleanup, fireEvent, act }

vite.config.js

@@ -1,5 +1,10 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { defineConfig } from 'vite'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
+
+const alias = {}
+
+if (SVELTE_VERSION >= '5') alias['./pure.js'] = './svelte5.js'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -20,5 +25,6 @@ export default defineConfig(({ mode }) => ({
       provider: 'v8',
       include: ['src'],
     },
+    alias,
   },
 }))