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

src/__tests__/multi-base.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('multi-base', () => {

src/__tests__/render.test.js

@@ -1,7 +1,7 @@
 import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { beforeEach, describe, expect, test } from 'vitest'
 
-import { act, render as stlRender } from '..'
+import { act, render as stlRender } from '@testing-library/svelte'
 import Comp from './fixtures/Comp.svelte'
 import CompDefault from './fixtures/Comp2.svelte'
 
@@ -107,7 +107,7 @@ describe('render', () => {
   })
 
   test('correctly find component constructor on the default property', () => {
-    const { getByText } = render(CompDefault, { props: { name: 'World' } })
+    const { getByText } = stlRender(CompDefault, { props: { name: 'World' } })
 
     expect(getByText('Hello World!')).toBeInTheDocument()
   })

src/__tests__/rerender.test.js

@@ -1,10 +1,10 @@
 /**
  * @jest-environment jsdom
  */
-import { describe, expect, test, vi } from 'vitest'
-import { writable } from 'svelte/store'
+import { expect, test, vi } from 'vitest'
+
+import { render, waitFor } from '@testing-library/svelte'
 
-import { act, render, waitFor } from '..'
 import Comp from './fixtures/Rerender.svelte'
 
 test('mounts new component successfully', async () => {

src/__tests__/transition.test.js

@@ -1,16 +1,17 @@
 import { userEvent } from '@testing-library/user-event'
-import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
-import { render, screen, waitFor } from '..'
+import { IS_JSDOM, IS_SVELTE_5 } from './utils.js'
+
+import { render, screen, waitFor } from '@testing-library/svelte'
 import Transitioner from './fixtures/Transitioner.svelte'
 
-describe.runIf(SVELTE_VERSION < '5')('transitions', () => {
+describe.runIf(!IS_SVELTE_5)('transitions', () => {
   beforeEach(() => {
-    if (window.navigator.userAgent.includes('jsdom')) {
-      const raf = (fn) => setTimeout(() => fn(new Date()), 16)
-      vi.stubGlobal('requestAnimationFrame', raf)
-    }
+    if (!IS_JSDOM) return
+
+    const raf = (fn) => setTimeout(() => fn(new Date()), 16)
+    vi.stubGlobal('requestAnimationFrame', raf)
   })
 
   test('on:introend', async () => {

src/__tests__/utils.js

@@ -0,0 +1,7 @@
+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'

src/index.js

@@ -13,3 +13,4 @@ if (typeof afterEach === 'function' && !process.env.STL_SKIP_AUTO_CLEANUP) {
 }
 
 export * from './pure.js'
+export * from '@testing-library/dom'