-
Notifications
You must be signed in to change notification settings - Fork 33
Description
Hello, @mcous has hijacked this post! We've launched (削除) experimental (削除ここまで) Svelte 5 support in @testing-library/svelte. (削除) See the Svelte 5 section in the README for setup instructions. (削除ここまで) No special setup is required to use Svelte 5 if you are using Vitest.
If you find bugs or have other Svelte 5 testing feedback, please add it to this thread! Svelte 5 is still changing rapidly at the time of writing, so feedback is appreciated!
Original post below
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch @testing-library/svelte@4.0.5 for the project I'm working on to use svelte 5.
This patches some breaking changes but there might be more work to do for a proper PR (are tests still working? support svelte 4 and 5, maybe more)
But for everyone who likes to try out svelte 5 this patch should be a good starting point.
Here is the diff that solved my problem:
diff --git a/node_modules/@testing-library/svelte/src/pure.js b/node_modules/@testing-library/svelte/src/pure.js index 04d3cb0..2f041e0 100644 --- a/node_modules/@testing-library/svelte/src/pure.js +++ b/node_modules/@testing-library/svelte/src/pure.js @@ -3,7 +3,7 @@ import { getQueriesForElement, prettyDOM } from '@testing-library/dom' -import { tick } from 'svelte' +import { tick, createRoot } from 'svelte' const containerCache = new Set() const componentCache = new Set() @@ -54,18 +54,15 @@ const render = ( return { props: options } } - let component = new ComponentConstructor({ + let component = createRoot(ComponentConstructor, { target, - ...checkProps(options) + ...checkProps(options), + ondestroy: () => componentCache.delete(component) }) containerCache.add({ container, target, component }) componentCache.add(component) - component.$$.on_destroy.push(() => { - componentCache.delete(component) - }) - return { container, component, @@ -73,18 +70,14 @@ const render = ( rerender: (options) => { if (componentCache.has(component)) component.$destroy() - // eslint-disable-next-line no-new - component = new ComponentConstructor({ + component = createRoot(ComponentConstructor, { target, - ...checkProps(options) + ...checkProps(options), + ondestroy: () => componentCache.delete(component) }) containerCache.add({ container, target, component }) componentCache.add(component) - - component.$$.on_destroy.push(() => { - componentCache.delete(component) - }) }, unmount: () => { if (componentCache.has(component)) component.$destroy()
This issue body was partially generated by patch-package.