alias pure.js to svelte5.js

Author: yanick

src/pure.js

@@ -4,13 +4,15 @@ import {
   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()
 
+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']
@@ -56,9 +58,10 @@ const render = (
   const renderComponent = (options) => {
     options = { target, ...checkProps(options) }
 
-    const component = IS_SVELTE_5
-      ? createComponentSvelte5({ component: 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.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,
   },
 }))