feat(svelte5): add Svelte 5 support into main entry point

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()