fix: $destroy and createRoot are no more (#328)

* fix: make the latest Svelte 5 pass all tests

For now I've resorted to use the legacy API, as
the use of runes don't seem to work in the test
environment (which, mind you, could be a problem on this side
of the keyboard) and the important part is to have the package
work with Svelte 5.

Author: yanick

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: {
+      '@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.

package.json

@@ -8,6 +8,10 @@
       "types": "./types/index.d.ts",
       "default": "./src/index.js"
     },
+    "./svelte5": {
+      "types": "./types/index.d.ts",
+      "default": "./src/svelte5-index.js"
+    },
     "./vitest": {
       "default": "./src/vitest.js"
     }

src/__tests__/act.test.js

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test } from 'vitest'
 
-import { act, fireEvent, render as stlRender } from '..'
+import { act, fireEvent, render as stlRender } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
 
 describe('act', () => {

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

@@ -7,7 +7,7 @@ describe('auto-cleanup-skip', () => {
 
   beforeAll(async () => {
     process.env.STL_SKIP_AUTO_CLEANUP = 'true'
-    const stl = await import('..')
+    const stl = await import('@testing-library/svelte')
     render = stl.render
   })
 

src/__tests__/auto-cleanup.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
-import { render } from '..'
+import { render } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
 
 describe('auto-cleanup', () => {

src/__tests__/cleanup.test.js

@@ -1,6 +1,7 @@
 import { describe, expect, test, vi } from 'vitest'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 
-import { act, cleanup, render } from '..'
+import { act, cleanup, render } from '@testing-library/svelte'
 import Mounter from './fixtures/Mounter.svelte'
 
 const onExecuted = vi.fn()
@@ -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,9 +1,10 @@
 import { expect, test } from 'vitest'
 
-import { render } from '..'
+import { render } from '@testing-library/svelte'
 import Comp from './fixtures/Context.svelte'
+import { IS_HAPPYDOM, IS_SVELTE_5 } from './utils.js'
 
-test('can set a context', () => {
+test.skipIf(IS_SVELTE_5 && IS_HAPPYDOM)('can set a context', () => {
   const message = 'Got it'
 
   const { getByText } = render(Comp, {

src/__tests__/debug.test.js

@@ -1,7 +1,7 @@
 import { prettyDOM } from '@testing-library/dom'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 
-import { render } from '..'
+import { render } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
 
 describe('debug', () => {

src/__tests__/events.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
-import { fireEvent, render } from '..'
+import { fireEvent, render } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
 
 describe('events', () => {

src/__tests__/mount.test.js

@@ -1,13 +1,14 @@
 import { describe, expect, test, vi } from 'vitest'
 
-import { act, render, screen } from '..'
+import { act, render, screen } from '@testing-library/svelte'
 import Mounter from './fixtures/Mounter.svelte'
+import { IS_HAPPYDOM, IS_SVELTE_5 } from './utils.js'
 
 const onMounted = vi.fn()
 const onDestroyed = vi.fn()
 const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
 
-describe('mount and destroy', () => {
+describe.skipIf(IS_SVELTE_5 && IS_HAPPYDOM)('mount and destroy', () => {
   test('component is mounted', async () => {
     renderSubject()