@testing-library/svelte 5.0.1 → 5.2.0-next.1

package/README.md

@@ -13,7 +13,7 @@
 <p>Simple and complete Svelte testing utilities that encourage good testing practices.</p>
 
 [**Read The Docs**](https://testing-library.com/docs/svelte-testing-library/intro) |
-[Edit the docs](https://github.com/alexkrolick/testing-library-docs)
+[Edit the docs](https://github.com/testing-library/testing-library-docs)
 
 <!-- prettier-ignore-start -->
 [![Build Status][build-badge]][build]
@@ -71,29 +71,36 @@ primary guiding principle is:
 This module is distributed via [npm][npm] which is bundled with [node][node] and
 should be installed as one of your project's `devDependencies`:
 
-```
+```shell
 npm install --save-dev @testing-library/svelte
 ```
 
-This library has `peerDependencies` listings for `svelte >= 3`.
+This library supports `svelte` versions `3`, `4`, and `5`.
 
 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
+## Setup
 
-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:
+We recommend using `@testing-library/svelte` with [Vitest][] as your test runner. To get started, add the `svelteTesting` plugin to your Vite or Vitest config.
 
+```diff
+  // vite.config.js
+  import { svelte } from '@sveltejs/vite-plugin-svelte'
++ import { svelteTesting } from '@testing-library/svelte/vite'
+
+  export default defineConfig({
+    plugins: [
+      svelte(),
++     svelteTesting(),
+    ]
+  });
 ```
-export default defineConfig(({ }) => ({
-  test: {
-    alias: {
-      '@testing-library/svelte': '@testing-library/svelte/svelte5'
-    }
-  },
-}))
-```
+
+See the [setup docs][] for more detailed setup instructions, including for other test runners like Jest.
+
+[vitest]: https://vitest.dev/
+[setup docs]: https://testing-library.com/docs/svelte-testing-library/setup
 
 ## Docs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/svelte",
-  "version": "5.0.1",
+  "version": "5.2.0-next.1",
   "description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
   "main": "src/index.js",
   "exports": {
@@ -10,10 +10,14 @@
     },
     "./svelte5": {
       "types": "./types/index.d.ts",
-      "default": "./src/svelte5-index.js"
+      "default": "./src/index.js"
     },
     "./vitest": {
       "default": "./src/vitest.js"
+    },
+    "./vite": {
+      "types": "./types/vite.d.ts",
+      "default": "./src/vite.js"
     }
   },
   "type": "module",
@@ -43,8 +47,10 @@
     "e2e"
   ],
   "files": [
-    "src/",
-    "types/index.d.ts"
+    "src",
+    "types",
+    "!*.test-d.ts",
+    "!__tests__"
   ],
   "scripts": {
     "toc": "doctoc README.md",
@@ -59,50 +65,64 @@
     "setup": "npm install && npm run validate",
     "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:jest": "npx --node-options=\"--experimental-vm-modules --no-warnings\" jest --coverage",
     "types": "svelte-check",
-    "validate": "npm-run-all test:vitest:* types",
+    "validate": "npm-run-all test:vitest:* test:jest types",
     "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate"
+    "contributors:generate": "all-contributors generate",
+    "preview-release": "./scripts/preview-release"
   },
   "peerDependencies": {
-    "svelte": "^3 || ^4 || ^5"
+    "svelte": "^3 || ^4 || ^5",
+    "vite": "*",
+    "vitest": "*"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@testing-library/dom": "^9.3.1"
+    "@testing-library/dom": "^10.0.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@jest/globals": "^29.7.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/user-event": "^14.5.2",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
+    "@vitest/coverage-v8": "^1.5.2",
     "all-contributors-cli": "^6.26.1",
     "doctoc": "^2.2.1",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-json-files": "^4.1.0",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-simple-import-sort": "10.0.0",
-    "eslint-plugin-svelte": "2.35.1",
-    "eslint-plugin-vitest-globals": "1.4.0",
-    "expect-type": "^0.17.3",
+    "eslint-plugin-simple-import-sort": "12.1.0",
+    "eslint-plugin-svelte": "2.38.0",
+    "eslint-plugin-vitest-globals": "1.5.0",
+    "expect-type": "^0.19.0",
     "happy-dom": "^14.7.1",
-    "jsdom": "^22.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "3.2.4",
-    "prettier-plugin-svelte": "3.1.2",
+    "prettier": "3.2.5",
+    "prettier-plugin-svelte": "3.2.3",
     "svelte": "^3 || ^4 || ^5",
     "svelte-check": "^3.6.3",
-    "svelte-jester": "^3.0.0",
+    "svelte-jester": "^5.0.0",
     "typescript": "^5.3.3",
     "vite": "^5.1.1",
-    "vitest": "^0.33.0"
+    "vitest": "^1.5.2"
   }
 }

package/src/core/index.js

@@ -0,0 +1,27 @@
+/**
+ * Rendering core for svelte-testing-library.
+ *
+ * Defines how components are added to and removed from the DOM.
+ * Will switch to legacy, class-based mounting logic
+ * if it looks like we're in a Svelte <= 4 environment.
+ */
+import * as LegacyCore from './legacy.js'
+import * as ModernCore from './modern.svelte.js'
+import {
+  createValidateOptions,
+  UnknownSvelteOptionsError,
+} from './validate-options.js'
+
+const { mount, unmount, updateProps, allowedOptions } =
+  ModernCore.IS_MODERN_SVELTE ? ModernCore : LegacyCore
+
+/** Validate component options. */
+const validateOptions = createValidateOptions(allowedOptions)
+
+export {
+  mount,
+  UnknownSvelteOptionsError,
+  unmount,
+  updateProps,
+  validateOptions,
+}

package/src/core/legacy.js

@@ -0,0 +1,46 @@
+/**
+ * Legacy rendering core for svelte-testing-library.
+ *
+ * Supports Svelte <= 4.
+ */
+
+/** Allowed options for the component constructor. */
+const allowedOptions = [
+  'target',
+  'accessors',
+  'anchor',
+  'props',
+  'hydrate',
+  'intro',
+  'context',
+]
+
+/**
+ * Mount the component into the DOM.
+ *
+ * The `onDestroy` callback is included for strict backwards compatibility
+ * with previous versions of this library. It's mostly unnecessary logic.
+ */
+const mount = (Component, options, onDestroy) => {
+  const component = new Component(options)
+
+  if (typeof onDestroy === 'function') {
+    component.$$.on_destroy.push(() => {
+      onDestroy(component)
+    })
+  }
+
+  return component
+}
+
+/** Remove the component from the DOM. */
+const unmount = (component) => {
+  component.$destroy()
+}
+
+/** Update the component's props. */
+const updateProps = (component, nextProps) => {
+  component.$set(nextProps)
+}
+
+export { allowedOptions, mount, unmount, updateProps }

package/src/core/modern.svelte.js

@@ -0,0 +1,50 @@
+/**
+ * Modern rendering core for svelte-testing-library.
+ *
+ * Supports Svelte >= 5.
+ */
+import * as Svelte from 'svelte'
+
+/** Props signals for each rendered component. */
+const propsByComponent = new Map()
+
+/** Whether we're using Svelte >= 5. */
+const IS_MODERN_SVELTE = typeof Svelte.mount === 'function'
+
+/** Allowed options to the `mount` call. */
+const allowedOptions = [
+  'target',
+  'anchor',
+  'props',
+  'events',
+  'context',
+  'intro',
+]
+
+/** Mount the component into the DOM. */
+const mount = (Component, options) => {
+  const props = $state(options.props ?? {})
+  const component = Svelte.mount(Component, { ...options, props })
+
+  propsByComponent.set(component, props)
+
+  return component
+}
+
+/** Remove the component from the DOM. */
+const unmount = (component) => {
+  propsByComponent.delete(component)
+  Svelte.unmount(component)
+}
+
+/**
+ * Update the component's props.
+ *
+ * Relies on the `$state` signal added in `mount`.
+ */
+const updateProps = (component, nextProps) => {
+  const prevProps = propsByComponent.get(component)
+  Object.assign(prevProps, nextProps)
+}
+
+export { allowedOptions, IS_MODERN_SVELTE, mount, unmount, updateProps }

package/src/core/validate-options.js

@@ -0,0 +1,39 @@
+class UnknownSvelteOptionsError extends TypeError {
+  constructor(unknownOptions, allowedOptions) {
+    super(`Unknown options.
+
+    Unknown: [ ${unknownOptions.join(', ')} ]
+    Allowed: [ ${allowedOptions.join(', ')} ]
+
+    To pass both Svelte options and props to a component,
+    or to use props that share a name with a Svelte option,
+    you must place all your props under the \`props\` key:
+
+    render(Component, { props: { /** props here **/ } })
+`)
+    this.name = 'UnknownSvelteOptionsError'
+  }
+}
+
+const createValidateOptions = (allowedOptions) => (options) => {
+  const isProps = !Object.keys(options).some((option) =>
+    allowedOptions.includes(option)
+  )
+
+  if (isProps) {
+    return { props: options }
+  }
+
+  // Check if any props and Svelte options were accidentally mixed.
+  const unknownOptions = Object.keys(options).filter(
+    (option) => !allowedOptions.includes(option)
+  )
+
+  if (unknownOptions.length > 0) {
+    throw new UnknownSvelteOptionsError(unknownOptions, allowedOptions)
+  }
+
+  return options
+}
+
+export { createValidateOptions, UnknownSvelteOptionsError }

package/src/index.js

@@ -4,8 +4,7 @@ import { act, cleanup } from './pure.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 you don't like this then set the STL_SKIP_AUTO_CLEANUP env variable.
 if (typeof afterEach === 'function' && !process.env.STL_SKIP_AUTO_CLEANUP) {
   afterEach(async () => {
     await act()
@@ -18,4 +17,10 @@ export * from '@testing-library/dom'
 
 // export svelte-specific functions and custom `fireEvent`
 // `fireEvent` must be a named export to take priority over wildcard export above
-export { act, cleanup, fireEvent, render } from './pure.js'
+export {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  UnknownSvelteOptionsError,
+} from './pure.js'

package/src/pure.js

@@ -3,155 +3,105 @@ import {
   getQueriesForElement,
   prettyDOM,
 } from '@testing-library/dom'
-import * as Svelte from 'svelte'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-
-const IS_SVELTE_5 = /^5\./.test(SVELTE_VERSION)
-
-export class SvelteTestingLibrary {
-  svelteComponentOptions = [
-    'target',
-    'accessors',
-    'anchor',
-    'props',
-    'hydrate',
-    'intro',
-    'context',
-  ]
-
-  targetCache = new Set()
-  componentCache = new Set()
-
-  checkProps(options) {
-    const isProps = !Object.keys(options).some((option) =>
-      this.svelteComponentOptions.includes(option)
-    )
-
-    // Check if any props and Svelte options were accidentally mixed.
-    if (!isProps) {
-      const unrecognizedOptions = Object.keys(options).filter(
-        (option) => !this.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 [${this.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 }
-  }
-
-  render(Component, componentOptions = {}, renderOptions = {}) {
-    componentOptions = this.checkProps(componentOptions)
-
-    const baseElement =
-      renderOptions.baseElement ?? componentOptions.target ?? document.body
-
-    const target =
-      componentOptions.target ??
-      baseElement.appendChild(document.createElement('div'))
-
-    this.targetCache.add(target)
-
-    const ComponentConstructor = Component.default || Component
-
-    const component = this.renderComponent(ComponentConstructor, {
-      ...componentOptions,
-      target,
-    })
-
-    return {
-      baseElement,
-      component,
-      container: target,
-      debug: (el = baseElement) => 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: () => {
-        this.cleanupComponent(component)
-      },
-      ...getQueriesForElement(baseElement, renderOptions.queries),
-    }
-  }
-
-  renderComponent(ComponentConstructor, componentOptions) {
-    if (IS_SVELTE_5) {
-      throw new Error('for Svelte 5, use `@testing-library/svelte/svelte5`')
-    }
-
-    const component = new ComponentConstructor(componentOptions)
+import { tick } from 'svelte'
 
-    this.componentCache.add(component)
-
-    // TODO(mcous, 2024-02-11): remove this behavior in the next major version
-    component.$$.on_destroy.push(() => {
-      this.componentCache.delete(component)
-    })
+import {
+  mount,
+  UnknownSvelteOptionsError,
+  unmount,
+  updateProps,
+  validateOptions,
+} from './core/index.js'
+
+const targetCache = new Set()
+const componentCache = new Set()
+
+const render = (Component, options = {}, renderOptions = {}) => {
+  options = validateOptions(options)
+
+  const baseElement =
+    renderOptions.baseElement ?? options.target ?? document.body
+
+  const queries = getQueriesForElement(baseElement, renderOptions.queries)
+
+  const target =
+    options.target ?? baseElement.appendChild(document.createElement('div'))
+
+  targetCache.add(target)
+
+  const component = mount(
+    Component.default ?? Component,
+    { ...options, target },
+    cleanupComponent
+  )
+
+  componentCache.add(component)
+
+  return {
+    baseElement,
+    component,
+    container: target,
+    debug: (el = baseElement) => {
+      console.log(prettyDOM(el))
+    },
+    rerender: async (props) => {
+      if (props.props) {
+        console.warn(
+          'rerender({ props: {...} }) deprecated, use rerender({...}) instead'
+        )
+        props = props.props
+      }
 
-    return component
+      updateProps(component, props)
+      await tick()
+    },
+    unmount: () => {
+      cleanupComponent(component)
+    },
+    ...queries,
   }
+}
 
-  cleanupComponent(component) {
-    const inCache = this.componentCache.delete(component)
+const cleanupComponent = (component) => {
+  const inCache = componentCache.delete(component)
 
-    if (inCache) {
-      component.$destroy()
-    }
+  if (inCache) {
+    unmount(component)
   }
+}
 
-  cleanupTarget(target) {
-    const inCache = this.targetCache.delete(target)
-
-    if (inCache && target.parentNode === document.body) {
-      document.body.removeChild(target)
-    }
-  }
+const cleanupTarget = (target) => {
+  const inCache = targetCache.delete(target)
 
-  cleanup() {
-    this.componentCache.forEach(this.cleanupComponent.bind(this))
-    this.targetCache.forEach(this.cleanupTarget.bind(this))
+  if (inCache && target.parentNode === document.body) {
+    document.body.removeChild(target)
   }
 }
 
-const instance = new SvelteTestingLibrary()
-
-export const render = instance.render.bind(instance)
-
-export const cleanup = instance.cleanup.bind(instance)
+const cleanup = () => {
+  componentCache.forEach(cleanupComponent)
+  targetCache.forEach(cleanupTarget)
+}
 
-export const act = async (fn) => {
+const act = async (fn) => {
   if (fn) {
     await fn()
   }
-  return Svelte.tick()
+  return tick()
 }
 
-export const fireEvent = async (...args) => {
+const fireEvent = async (...args) => {
   const event = dtlFireEvent(...args)
-  await Svelte.tick()
+  await tick()
   return event
 }
 
 Object.keys(dtlFireEvent).forEach((key) => {
   fireEvent[key] = async (...args) => {
     const event = dtlFireEvent[key](...args)
-    await Svelte.tick()
+    await tick()
     return event
   }
 })
+
+export { act, cleanup, fireEvent, render, UnknownSvelteOptionsError }

package/src/vite.js

@@ -0,0 +1,75 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+/**
+ * Vite plugin to configure @testing-library/svelte.
+ *
+ * Ensures Svelte is imported correctly in tests
+ * and that the DOM is cleaned up after each test.
+ *
+ * @param {{resolveBrowser?: boolean, autoCleanup?: boolean}} options
+ * @returns {import('vite').Plugin}
+ */
+export const svelteTesting = ({
+  resolveBrowser = true,
+  autoCleanup = true,
+} = {}) => ({
+  name: 'vite-plugin-svelte-testing-library',
+  config: (config) => {
+    if (!process.env.VITEST) {
+      return
+    }
+
+    if (resolveBrowser) {
+      addBrowserCondition(config)
+    }
+
+    if (autoCleanup) {
+      addAutoCleanup(config)
+    }
+  },
+})
+
+/**
+ * Add `browser` to `resolve.conditions` before `node`.
+ *
+ * This ensures that Svelte's browser code is used in tests,
+ * rather than its SSR code.
+ *
+ * @param {import('vitest/config').UserConfig} config
+ */
+const addBrowserCondition = (config) => {
+  const resolve = config.resolve ?? {}
+  const conditions = resolve.conditions ?? []
+  const nodeConditionIndex = conditions.indexOf('node')
+  const browserConditionIndex = conditions.indexOf('browser')
+
+  if (
+    nodeConditionIndex >= 0 &&
+    (nodeConditionIndex < browserConditionIndex || browserConditionIndex < 0)
+  ) {
+    conditions.splice(nodeConditionIndex, 0, 'browser')
+  }
+
+  resolve.conditions = conditions
+  config.resolve = resolve
+}
+
+/**
+ * Add auto-cleanup file to Vitest's setup files.
+ *
+ * @param {import('vitest/config').UserConfig} config
+ */
+const addAutoCleanup = (config) => {
+  const test = config.test ?? {}
+  let setupFiles = test.setupFiles ?? []
+
+  if (typeof setupFiles === 'string') {
+    setupFiles = [setupFiles]
+  }
+
+  setupFiles.push(join(dirname(fileURLToPath(import.meta.url)), './vitest.js'))
+
+  test.setupFiles = setupFiles
+  config.test = test
+}

package/types/vite.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Vite plugin to configure @testing-library/svelte.
+ *
+ * Ensures Svelte is imported correctly in tests
+ * and that the DOM is cleaned up after each test.
+ */
+export function svelteTesting(options?: {
+  resolveBrowser?: boolean
+  autoCleanup?: boolean
+}): Plugin

package/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap

@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`auto-cleanup-skip > second 1`] = `""`;

package/src/__tests__/_vitest-setup.js

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom/vitest'
-import '../vitest'

package/src/__tests__/act.test.js

@@ -1,33 +0,0 @@
-import { setTimeout } from 'node:timers/promises'
-
-import { act, render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('act', () => {
-  test('state updates are flushed', async () => {
-    const { getByText } = render(Comp)
-    const button = getByText('Button')
-
-    expect(button).toHaveTextContent('Button')
-
-    await act(() => {
-      button.click()
-    })
-
-    expect(button).toHaveTextContent('Button Clicked')
-  })
-
-  test('accepts async functions', async () => {
-    const { getByText } = render(Comp)
-    const button = getByText('Button')
-
-    await act(async () => {
-      await setTimeout(100)
-      button.click()
-    })
-
-    expect(button).toHaveTextContent('Button Clicked')
-  })
-})

package/src/__tests__/auto-cleanup-skip.test.js

@@ -1,23 +0,0 @@
-import { beforeAll, describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('auto-cleanup-skip', () => {
-  let render
-
-  beforeAll(async () => {
-    process.env.STL_SKIP_AUTO_CLEANUP = 'true'
-    const stl = await import('@testing-library/svelte')
-    render = stl.render
-  })
-
-  // This one verifies that if STL_SKIP_AUTO_CLEANUP is set
-  // then we DON'T auto-wire up the afterEach for folks
-  test('first', () => {
-    render(Comp, { props: { name: 'world' } })
-  })
-
-  test('second', () => {
-    expect(document.body.innerHTML).toMatchSnapshot()
-  })
-})

package/src/__tests__/auto-cleanup.test.js

@@ -1,31 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('auto-cleanup', () => {
-  // This just verifies that by importing STL in an
-  // environment which supports afterEach (like jest)
-  // we'll get automatic cleanup between tests.
-  test('first', () => {
-    render(Comp, { props: { name: 'world' } })
-  })
-
-  test('second', () => {
-    expect(document.body.innerHTML).toEqual('')
-  })
-})
-
-describe('cleanup of two components', () => {
-  // This just verifies that by importing STL in an
-  // environment which supports afterEach (like jest)
-  // we'll get automatic cleanup between tests.
-  test('first', () => {
-    render(Comp, { props: { name: 'world' } })
-    render(Comp, { props: { name: 'universe' } })
-  })
-
-  test('second', () => {
-    expect(document.body.innerHTML).toEqual('')
-  })
-})

package/src/__tests__/cleanup.test.js

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

package/src/__tests__/context.test.js

@@ -1,14 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { expect, test } from 'vitest'
-
-import Comp from './fixtures/Context.svelte'
-
-test('can set a context', () => {
-  const message = 'Got it'
-
-  const { getByText } = render(Comp, {
-    context: new Map(Object.entries({ foo: { message } })),
-  })
-
-  expect(getByText(message)).toBeTruthy()
-})

package/src/__tests__/debug.test.js

@@ -1,18 +0,0 @@
-import { prettyDOM } from '@testing-library/dom'
-import { render } from '@testing-library/svelte'
-import { describe, expect, test, vi } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('debug', () => {
-  test('pretty prints the base element', () => {
-    vi.stubGlobal('console', { log: vi.fn(), warn: vi.fn(), error: vi.fn() })
-
-    const { baseElement, debug } = render(Comp, { props: { name: 'world' } })
-
-    debug()
-
-    expect(console.log).toHaveBeenCalledTimes(1)
-    expect(console.log).toHaveBeenCalledWith(prettyDOM(baseElement))
-  })
-})

package/src/__tests__/events.test.js

@@ -1,32 +0,0 @@
-import { fireEvent, render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('events', () => {
-  test('state changes are flushed after firing an event', async () => {
-    const { getByText } = render(Comp, { props: { name: 'World' } })
-    const button = getByText('Button')
-
-    const result = fireEvent.click(button)
-
-    await expect(result).resolves.toBe(true)
-    expect(button).toHaveTextContent('Button Clicked')
-  })
-
-  test('calling `fireEvent` directly works too', async () => {
-    const { getByText } = render(Comp, { props: { name: 'World' } })
-    const button = getByText('Button')
-
-    const result = fireEvent(
-      button,
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-
-    await expect(result).resolves.toBe(true)
-    expect(button).toHaveTextContent('Button Clicked')
-  })
-})

package/src/__tests__/fixtures/Comp.svelte

@@ -1,17 +0,0 @@
-<svelte:options accessors />
-
-<script>
-  export let name = 'World'
-
-  let buttonText = 'Button'
-
-  function handleClick() {
-    buttonText = 'Button Clicked'
-  }
-</script>
-
-<h1 data-testid="test">Hello {name}!</h1>
-
-<button on:click={handleClick}>{buttonText}</button>
-
-<style></style>

package/src/__tests__/fixtures/Context.svelte

@@ -1,7 +0,0 @@
-<script>
-  import { getContext } from 'svelte'
-
-  const ctx = getContext('foo')
-</script>
-
-<div>{ctx.message}</div>

package/src/__tests__/fixtures/Mounter.svelte

@@ -1,19 +0,0 @@
-<script>
-  import { onDestroy, onMount } from 'svelte'
-
-  export let onExecuted = undefined
-  export let onMounted = undefined
-  export let onDestroyed = undefined
-
-  onExecuted?.()
-
-  onMount(() => {
-    onMounted?.()
-  })
-
-  onDestroy(() => {
-    onDestroyed?.()
-  })
-</script>
-
-<button />

package/src/__tests__/fixtures/Simple.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  export let name: string
-  export let count: number
-</script>
-
-<h1>hello {name}</h1>
-<p>count: {count}</p>

package/src/__tests__/fixtures/Transitioner.svelte

@@ -1,18 +0,0 @@
-<script>
-  import { blur } from 'svelte/transition'
-
-  let show = false
-  let introDone = false
-</script>
-
-<button on:click={() => (show = true)}>Show</button>
-
-{#if show}
-  <div in:blur={{ duration: 64 }} on:introend={() => (introDone = true)}>
-    {#if introDone}
-      <p data-testid="intro-done">Done</p>
-    {:else}
-      <p data-testid="intro-pending">Pending</p>
-    {/if}
-  </div>
-{/if}

package/src/__tests__/mount.test.js

@@ -1,33 +0,0 @@
-import { act, render, screen } from '@testing-library/svelte'
-import { describe, expect, test, vi } from 'vitest'
-
-import Mounter from './fixtures/Mounter.svelte'
-
-const onMounted = vi.fn()
-const onDestroyed = vi.fn()
-const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
-
-describe('mount and destroy', () => {
-  test('component is mounted', async () => {
-    renderSubject()
-
-    const content = screen.getByRole('button')
-
-    expect(content).toBeInTheDocument()
-    await act()
-    expect(onMounted).toHaveBeenCalledOnce()
-  })
-
-  test('component is destroyed', async () => {
-    const { unmount } = renderSubject()
-
-    await act()
-    unmount()
-
-    const content = screen.queryByRole('button')
-
-    expect(content).not.toBeInTheDocument()
-    await act()
-    expect(onDestroyed).toHaveBeenCalledOnce()
-  })
-})

package/src/__tests__/multi-base.test.js

@@ -1,42 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('multi-base', () => {
-  const treeA = document.createElement('div')
-  const treeB = document.createElement('div')
-
-  test('container isolates trees from one another', () => {
-    const { getByText: getByTextInA } = render(
-      Comp,
-      {
-        target: treeA,
-        props: {
-          name: 'Tree A',
-        },
-      },
-      {
-        baseElement: treeA,
-      }
-    )
-
-    const { getByText: getByTextInB } = render(
-      Comp,
-      {
-        target: treeB,
-        props: {
-          name: 'Tree B',
-        },
-      },
-      {
-        baseElement: treeB,
-      }
-    )
-
-    expect(() => getByTextInA('Hello Tree A!')).not.toThrow()
-    expect(() => getByTextInB('Hello Tree A!')).toThrow()
-    expect(() => getByTextInA('Hello Tree B!')).toThrow()
-    expect(() => getByTextInB('Hello Tree B!')).not.toThrow()
-  })
-})

package/src/__tests__/render.test.js

@@ -1,85 +0,0 @@
-import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-import { IS_SVELTE_5 } from './utils.js'
-
-describe('render', () => {
-  const props = { name: 'World' }
-
-  test('renders component into the document', () => {
-    const { getByText } = render(Comp, { props })
-
-    expect(getByText('Hello World!')).toBeInTheDocument()
-  })
-
-  test('accepts props directly', () => {
-    const { getByText } = render(Comp, props)
-    expect(getByText('Hello World!')).toBeInTheDocument()
-  })
-
-  test('throws error when mixing svelte component options and props', () => {
-    expect(() => {
-      render(Comp, { props, name: 'World' })
-    }).toThrow(/Unknown options/)
-  })
-
-  test('throws error when mixing target option and props', () => {
-    expect(() => {
-      render(Comp, { target: document.createElement('div'), name: 'World' })
-    }).toThrow(/Unknown options/)
-  })
-
-  test('should return a container object wrapping the DOM of the rendered component', () => {
-    const { container, getByTestId } = render(Comp, props)
-    const firstElement = getByTestId('test')
-
-    expect(container.firstChild).toBe(firstElement)
-  })
-
-  test('should return a baseElement object, which holds the container', () => {
-    const { baseElement, container } = render(Comp, props)
-
-    expect(baseElement).toBe(document.body)
-    expect(baseElement.firstChild).toBe(container)
-  })
-
-  test('if target is provided, use it as container and baseElement', () => {
-    const target = document.createElement('div')
-    const { baseElement, container } = render(Comp, { props, target })
-
-    expect(container).toBe(target)
-    expect(baseElement).toBe(target)
-  })
-
-  test('allow baseElement to be specified', () => {
-    const customBaseElement = document.createElement('div')
-
-    const { baseElement, container } = render(
-      Comp,
-      { props },
-      { baseElement: customBaseElement }
-    )
-
-    expect(baseElement).toBe(customBaseElement)
-    expect(baseElement.firstChild).toBe(container)
-  })
-
-  test.skipIf(IS_SVELTE_5)('should accept anchor option in Svelte v4', () => {
-    const baseElement = document.body
-    const target = document.createElement('section')
-    const anchor = document.createElement('div')
-    baseElement.appendChild(target)
-    target.appendChild(anchor)
-
-    const { getByTestId } = render(
-      Comp,
-      { props, target, anchor },
-      { baseElement }
-    )
-    const firstElement = getByTestId('test')
-
-    expect(target.firstChild).toBe(firstElement)
-    expect(target.lastChild).toBe(anchor)
-  })
-})

package/src/__tests__/rerender.test.js

@@ -1,50 +0,0 @@
-import { act, render, screen } from '@testing-library/svelte'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-import { describe, expect, test, vi } from 'vitest'
-
-import Comp from './fixtures/Comp.svelte'
-
-describe('rerender', () => {
-  test('updates props', async () => {
-    const { rerender } = render(Comp, { name: 'World' })
-    const element = screen.getByText('Hello World!')
-
-    await rerender({ name: 'Dolly' })
-
-    expect(element).toHaveTextContent('Hello Dolly!')
-  })
-
-  test('warns if incorrect arguments shape used', async () => {
-    vi.stubGlobal('console', { log: vi.fn(), warn: vi.fn(), error: vi.fn() })
-
-    const { rerender } = render(Comp, { name: 'World' })
-    const element = screen.getByText('Hello World!')
-
-    await rerender({ props: { name: 'Dolly' } })
-
-    expect(element).toHaveTextContent('Hello Dolly!')
-    expect(console.warn).toHaveBeenCalledOnce()
-    expect(console.warn).toHaveBeenCalledWith(
-      expect.stringMatching(/deprecated/iu)
-    )
-  })
-
-  test('change props with accessors', async () => {
-    const { component, getByText } = render(
-      Comp,
-      SVELTE_VERSION < '5'
-        ? { accessors: true, props: { name: 'World' } }
-        : { name: 'World' }
-    )
-    const element = getByText('Hello World!')
-
-    expect(element).toBeInTheDocument()
-    expect(component.name).toBe('World')
-
-    await act(() => {
-      component.name = 'Planet'
-    })
-
-    expect(element).toHaveTextContent('Hello Planet!')
-  })
-})

package/src/__tests__/transition.test.js

@@ -1,31 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/svelte'
-import { userEvent } from '@testing-library/user-event'
-import { beforeEach, describe, expect, test, vi } from 'vitest'
-
-import Transitioner from './fixtures/Transitioner.svelte'
-import { IS_JSDOM, IS_SVELTE_5 } from './utils.js'
-
-describe.skipIf(IS_SVELTE_5)('transitions', () => {
-  beforeEach(() => {
-    if (!IS_JSDOM) return
-
-    const raf = (fn) => setTimeout(() => fn(new Date()), 16)
-    vi.stubGlobal('requestAnimationFrame', raf)
-  })
-
-  test('on:introend', async () => {
-    const user = userEvent.setup()
-
-    render(Transitioner)
-    const start = screen.getByRole('button')
-    await user.click(start)
-
-    const pending = screen.getByTestId('intro-pending')
-    expect(pending).toBeInTheDocument()
-
-    await waitFor(() => {
-      const done = screen.queryByTestId('intro-done')
-      expect(done).toBeInTheDocument()
-    })
-  })
-})

package/src/__tests__/utils.js

@@ -1,7 +0,0 @@
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-
-export const IS_JSDOM = window.navigator.userAgent.includes('jsdom')
-
-export const IS_HAPPYDOM = !IS_JSDOM // right now it's happy or js
-
-export const IS_SVELTE_5 = SVELTE_VERSION >= '5'

package/src/svelte5-index.js

@@ -1,23 +0,0 @@
-/* eslint-disable import/export */
-import { act } from './pure.js'
-import { 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 all base queries, screen, etc.
-export * from '@testing-library/dom'
-
-// export svelte-specific functions and custom `fireEvent`
-// `fireEvent` must be a named export to take priority over wildcard export above
-export { act, fireEvent } from './pure.js'
-export { cleanup, render } from './svelte5.js'

package/src/svelte5.js

@@ -1,30 +0,0 @@
-import { createClassComponent } from 'svelte/legacy'
-
-import { SvelteTestingLibrary } from './pure.js'
-
-class Svelte5TestingLibrary extends SvelteTestingLibrary {
-  svelteComponentOptions = [
-    'target',
-    'props',
-    'events',
-    'context',
-    'intro',
-    'recover',
-  ]
-
-  renderComponent(ComponentConstructor, componentOptions) {
-    const component = createClassComponent({
-      ...componentOptions,
-      component: ComponentConstructor,
-    })
-
-    this.componentCache.add(component)
-
-    return component
-  }
-}
-
-const instance = new Svelte5TestingLibrary()
-
-export const render = instance.render.bind(instance)
-export const cleanup = instance.cleanup.bind(instance)