feat(svelte5): incorporate Svelte 5 support into main entry point (#375)

Author: mcous

.eslintrc.cjs

@@ -25,6 +25,7 @@ module.exports = {
       },
       rules: {
         'no-undef-init': 'off',
+        'prefer-const': 'off',
       },
     },
     {
@@ -49,5 +50,6 @@ module.exports = {
     ecmaVersion: 2022,
     sourceType: 'module',
   },
+  globals: { $state: 'readonly', $props: 'readonly' },
   ignorePatterns: ['!/.*'],
 }

README.md

@@ -71,11 +71,11 @@ 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).
@@ -102,22 +102,6 @@ See the [setup docs][] for more detailed setup instructions, including for other
 [vitest]: https://vitest.dev/
 [setup docs]: https://testing-library.com/docs/svelte-testing-library/setup
 
-### 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 add an alias to your `vite.config.js`:
-
-```js
-export default defineConfig({
-  plugins: [svelte(), svelteTesting()],
-  test: {
-    alias: {
-      '@testing-library/svelte': '@testing-library/svelte/svelte5',
-    },
-  },
-})
-```
-
 ## Docs
 
 See the [**docs**](https://testing-library.com/docs/svelte-testing-library/intro) over at the Testing Library website.

jest.config.js

@@ -1,11 +1,12 @@
 import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 
-const IS_SVELTE_5 = SVELTE_VERSION >= '5'
+const SVELTE_TRANSFORM_PATTERN =
+  SVELTE_VERSION >= '5' ? '^.+\\.svelte(?:\\.js)?$' : '^.+\\.svelte$'
 
 export default {
   testMatch: ['<rootDir>/src/__tests__/**/*.test.js'],
   transform: {
-    '^.+\\.svelte$': 'svelte-jester',
+    [SVELTE_TRANSFORM_PATTERN]: 'svelte-jester',
   },
   moduleFileExtensions: ['js', 'svelte'],
   extensionsToTreatAsEsm: ['.svelte'],
@@ -14,9 +15,6 @@ export default {
   injectGlobals: false,
   moduleNameMapper: {
     '^vitest$': '<rootDir>/src/__tests__/_jest-vitest-alias.js',
-    '^@testing-library/svelte$': IS_SVELTE_5
-      ? '<rootDir>/src/svelte5-index.js'
-      : '<rootDir>/src/index.js',
   },
   resetMocks: true,
   restoreMocks: true,

package.json

@@ -10,7 +10,7 @@
     },
     "./svelte5": {
       "types": "./types/index.d.ts",
-      "default": "./src/svelte5-index.js"
+      "default": "./src/index.js"
     },
     "./vitest": {
       "default": "./src/vitest.js"
@@ -120,7 +120,7 @@
     "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": "^1.5.2"

src/__tests__/auto-cleanup.test.js

@@ -1,10 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 
-import { IS_SVELTE_5 } from './utils.js'
-
-const importSvelteTestingLibrary = async () =>
-  IS_SVELTE_5 ? import('../svelte5-index.js') : import('../index.js')
-
 const globalAfterEach = vi.fn()
 
 describe('auto-cleanup', () => {
@@ -19,7 +14,7 @@ describe('auto-cleanup', () => {
   })
 
   test('calls afterEach with cleanup if globally defined', async () => {
-    const { render } = await importSvelteTestingLibrary()
+    const { render } = await import('../index.js')
 
     expect(globalAfterEach).toHaveBeenCalledTimes(1)
     expect(globalAfterEach).toHaveBeenLastCalledWith(expect.any(Function))
@@ -35,7 +30,7 @@ describe('auto-cleanup', () => {
   test('does not call afterEach if process STL_SKIP_AUTO_CLEANUP is set', async () => {
     process.env.STL_SKIP_AUTO_CLEANUP = 'true'
 
-    await importSvelteTestingLibrary()
+    await import('../index.js')
 
     expect(globalAfterEach).toHaveBeenCalledTimes(0)
   })

src/__tests__/fixtures/Comp.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore options_deprecated_accessors -->
 <svelte:options accessors />
 
 <script>

src/__tests__/fixtures/CompRunes.svelte

@@ -0,0 +1,13 @@
+<script>
+  let { name = 'World' } = $props()
+
+  let buttonText = $state('Button')
+
+  function handleClick() {
+    buttonText = 'Button Clicked'
+  }
+</script>
+
+<h1 data-testid="test">Hello {name}!</h1>
+
+<button onclick={handleClick}>{buttonText}</button>

src/__tests__/fixtures/Mounter.svelte

@@ -16,4 +16,4 @@
   })
 </script>
 
-<button />
+<button></button>

src/__tests__/render.test.js

@@ -1,11 +1,15 @@
 import { render } from '@testing-library/svelte'
-import { describe, expect, test } from 'vitest'
+import { beforeAll, describe, expect, test } from 'vitest'
 
-import Comp from './fixtures/Comp.svelte'
-import { IS_SVELTE_5 } from './utils.js'
+import { COMPONENT_FIXTURES } from './utils.js'
 
-describe('render', () => {
+describe.each(COMPONENT_FIXTURES)('render ($mode)', ({ component }) => {
   const props = { name: 'World' }
+  let Comp
+
+  beforeAll(async () => {
+    Comp = await import(component)
+  })
 
   test('renders component into the document', () => {
     const { getByText } = render(Comp, { props })
@@ -65,7 +69,7 @@ describe('render', () => {
     expect(baseElement.firstChild).toBe(container)
   })
 
-  test.skipIf(IS_SVELTE_5)('should accept anchor option in Svelte v4', () => {
+  test('should accept anchor option', () => {
     const baseElement = document.body
     const target = document.createElement('section')
     const anchor = document.createElement('div')

src/__tests__/rerender.test.js

@@ -1,10 +1,15 @@
 import { act, render, screen } from '@testing-library/svelte'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
-import { describe, expect, test, vi } from 'vitest'
+import { beforeAll, describe, expect, test, vi } from 'vitest'
 
-import Comp from './fixtures/Comp.svelte'
+import { COMPONENT_FIXTURES, IS_SVELTE_5, MODE_RUNES } from './utils.js'
+
+describe.each(COMPONENT_FIXTURES)('rerender ($mode)', ({ mode, component }) => {
+  let Comp
+
+  beforeAll(async () => {
+    Comp = await import(component)
+  })
 
-describe('rerender', () => {
   test('updates props', async () => {
     const { rerender } = render(Comp, { name: 'World' })
     const element = screen.getByText('Hello World!')
@@ -29,13 +34,12 @@ describe('rerender', () => {
     )
   })
 
-  test('change props with accessors', async () => {
-    const { component, getByText } = render(
-      Comp,
-      SVELTE_VERSION < '5'
-        ? { accessors: true, props: { name: 'World' } }
-        : { name: 'World' }
-    )
+  test.skipIf(mode === MODE_RUNES)('change props with accessors', async () => {
+    const componentOptions = IS_SVELTE_5
+      ? { name: 'World' }
+      : { accessors: true, props: { name: 'World' } }
+
+    const { component, getByText } = render(Comp, componentOptions)
     const element = getByText('Hello World!')
 
     expect(element).toBeInTheDocument()

src/__tests__/utils.js

@@ -5,3 +5,20 @@ 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'
+
+export const MODE_LEGACY = 'legacy'
+
+export const MODE_RUNES = 'runes'
+
+export const COMPONENT_FIXTURES = [
+  {
+    mode: MODE_LEGACY,
+    component: './fixtures/Comp.svelte',
+    isEnabled: true,
+  },
+  {
+    mode: MODE_RUNES,
+    component: './fixtures/CompRunes.svelte',
+    isEnabled: IS_SVELTE_5,
+  },
+].filter(({ isEnabled }) => isEnabled)

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,
+}

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 }

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 }