Svelte 5 feedback and support #284
Comments
|
Thank you for this, this works flawlessly, you should def. make a pull request , cheers my friend. |
|
Thanks @stefanhoelzl, this is working a treat! Any ideas on how to test snippets? So far I haven't managed to figure out how to provide a snippet to the props API. So it's back to the old slots hack of making a wrapping component for tests. |
|
Anyone have any luck with snippets? The wrapper components are boilerplate-laden - was hoping to not have to do that. If anyone has any pointers, I'm happy to give it a shot myself. |
|
EDIT: Ignore this part - after a LOT of debugging, this seems to be a problem when using
PrettyFormatPluginError: Cannot read properties of null (reading 'toLowerCase')
|
|
I've been messing around with Svelte 5 in our existing test suite, and have encountered the following issues so far. I didn't see any of these explicitly called out in the change log, but I'm assuming at the moment that they're all intentional.
|
|
|
Rudimentary support for Svelte 5 has been released on the Since Svelte 5 itself is not ready, expect issues and breaking changes if you try it out! |
|
@mcous thx, so @testing-library/svelte@next is "@testing-library/svelte": "^4.2.0", with this version it works |
|
FYI for those following along: as of the latest |
:darth vader big NOOO: |
|
@mcous If you have any suggestions for directed ways to help, I'm all ears :) Though, less familiar with the internals of the lib. Is the issue that they removed the API call we use? And that it needs to be migrated to the new one? Or is the new mount API a no-go? |
|
Anyone know of any updates? |
|
Experimental Svelte v5 support is available on the npm install --save-dev @testing-library/svelte@nextIn your test files: import { render } from '@testing-library/svelte/svelte5'@yanick how would you feel about bumping the The |
|
Your previous update noted that Svelte 5 support did not work at all. It isn't clear from this update if it has been fixed. |
|
Fwiw, I'm kinda busy today, but I'll try to turn my attention to deployment tomorrow. |
It has been fixed for now, it may be broken tomorrow. With the very-in-progress nature of Svelte v5, the best way to find out if it's currently working will be to try it yourself |
|
When I tried testing-lib out a week or so ago, it was working - but also note that there are still bugs depending on whether you're using JSDom vs Happy-Dom, or from svelte itself, or any related libraries. I've been working on a Svelte 5 headless UI port, and Svelte5 + interop is a bit messy at the moment (to say the least) :) |
|
Experimental Svelte 5 support has landed in
|
|
When using I have also run into the |
@MatthewTFarley auto-cleanup via plugin works if you use the suggested Svelte 5 alias setup from the README! Otherwise, export default defineConfig({
plugins: [svelte(), svelteTesting()],
test: {
alias: {
'@testing-library/svelte': '@testing-library/svelte/svelte5',
},
},
})
I wonder what's going to happen here! The animations work in the browser, but neither We may have to start thinking about shipping our own |
|
@mcous I don't know enough to know if what I have should be working, or is expected to be broken. I am on latest versions as of this second of all packages, and latest "next" versions where possible (e.g. Svelte 5 next 118). I have some basic tests working, following the patterns of the internal tests of this actual library ( When I use the alias mentioned above and in the readme, my test suite doesn't run: My config (after adding the alias): When I remove the |
|
@pboling
Both of these jobs the plugin now handles for you. I find that this configuration - as listed in the README - behaves well with Svelte 5: // vite.config.ts
// ...
export default defineConfig({
plugins: [sveltekit(), svelteTesting()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}'],
environment: "jsdom",
alias: {
"@testing-library/svelte": "@testing-library/svelte/svelte5",
},
setupFiles: ["./vitest-setup.ts"],
},
});// vitest-setup.ts
// Only needed to configure `@testing-library/jest-dom`
import '@testing-library/jest-dom/vitest`If this doesn't work, you could try using a more specific alias. In my own projects, this is necessary only if I'm not using the {
// ...
test: {
// ...
alias: [
{
find: /^@testing-library\/svelte$/,
replacement: '@testing-library/svelte/svelte5',
},
],
// ...
},
}(All this being said, something feels off to me here. I think having a separate Svelte 5 import path is probably causing more trouble than it's worth. I don't think the situation will stick around too much longer, though) |
|
@mcous The top suggestions you gave are working! I did not need the more specific alternative alias. |
|
It says at the top of this issue to post problems or issues with Svelte 5 testing and feedback. So, here goes: I am trying to write a test for my Svelte 5 component, but am struggling to figure out how to test a Here is a simple component: <script lang="ts">
import type { Snippet } from 'svelte';
let {
children,
checked = $bindable(),
...restProps
}: { children: Snippet; checked?: boolean; disabled?: boolean } = $props();
</script>
<label
data-testid="checkbox"
class="flex h-6 items-center text-sm leading-6 text-900"
>
<input
data-testid="checkbox-input"
{...restProps}
type="checkbox"
class="h-4 w-4 rounded border border-300 checked:bg-secondary-600 checked:text-on-secondary-600 focus:ring-secondary-600 focus:outline-none focus:ring"
bind:checked
/>
<div data-testid="checkbox-label" class="ml-3">
{@render children()}
</div>
</label>Here is a test that tries to test the bindable nature of the import { render, screen } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import userEvent from '@testing-library/user-event';
import { flush } from '$root/test-helpers';
import Checkbox from './Checkbox.svelte';
import { createRawSnippet } from 'svelte';
function getTestSnippet() {
return createRawSnippet(() => {
return {
render: () => `My checkbox`,
};
});
}
describe('Checkbox', () => {
it('should bind to checked', async () => {
const user = userEvent.setup();
const checked = $state(false);
render(Checkbox, {
props: {
checked,
children: getTestSnippet(),
},
});
await flush();
const input = screen.getByTestId('checkbox-input');
await user.click(input);
await flush();
expect(input).toBeChecked();
expect(checked).toBe(true);
});
});I am trying to simulate the Any help or direction, or verification that there is a bug or issue here, would be appreciated. |
|
@bradyisom in Svelte 4, binds were not directly testable, and as far as I know, this hasn't changed in Svelte 5. You will likely need a wrapper component - see the Svelte 4 example for testing Opinionated advice that you didn't ask for: don't use |
|
@mcous, Thank you for your quick response. I did look at that Svelte 4 example several times, but somehow missed that it was creating a testing/wrapper component. I also got thrown off, because it was using a I will take your unsolicited advice under consideration. |
|
I did refactor my code to use events, instead of binding values. However, I ran into a similar problem when working through dynamically mounting components. I was curious if there was a real solution, if you still want to use I did a deeper dive into understanding universal reactivity and state. I found that I could actually "bind" the props in my test and test let checked = $state(false);
render(Checkbox, {
props: {
get checked() {
return checked;
},
set checked(value: boolean) {
checked = value;
},
children: getTestSnippet(),
},
});The key is adding the |
|
Just started looking at upgrading our app to Svelte5 now that it is released, and getting these errors in vitest using testing-library. App seems to run fine in the browser, so this has something to do with simulated dom/browser testing? I'm able to reduce the ResizeObserver errors using this, but not sure if this is the right approach: |
|
@KieranP, Svelte v5 now uses |
|
@KieranP same story as
Hard to say what would cause without seeing more of your code. If you can create a minimal reproduction of this particular error, feel free to throw a link in here or in discord if you need help debugging |
|
@mcous Thanks for the response. I'll see what I can do about mocking the APIs. Using browser mode for the basic tests I'm doing seems like overkill in our use case, so I want to try avoid it if possible. As for effect_update_depth_exceeded, it seems that this is a possible undocumented breaking change; some state change that used to work in my Svelte 4 app but not causes a loop and throwing of effect_update_depth_exceeded error in Svelte 5. I've opened a ticket with the Svelte team. |
|
Hi there ! I haven't been able to mock it correctly so far... |
|
Ok, i solved my issue. I first badly mocked without realising this actually then builds a malformed Mocking this way solves this : |
|
Hello Not sure if that was mentioned before, but I cannot really see any way events can be tested with spy after upgrading. But in svelte 5 the $on function is no longer present on the component. Is there any alternative way to do this now? |
I think the only way is to migrate your events to props. |
@cezaryszymanski I believe you can pass an render(Component, {
props: { /* ... */ },
events: { /* ... */ },
})Migrating to function props might be easier |
|
After the update my test where I do JSON file upload has 2 errors and I upload files like in the docs example https://testing-library.com/docs/user-event/utility/#upload The test still ends with success but with this errors |
|
@cezaryszymanski I'd be happy to help diagnose this issue if you could provide a minimal reproduction in a repository or Stackblitz. It sounds like an issue with Did you update more than just Svelte and STL for your project? |
|
@mcous After some more debugging I thing that the second error I mentioned might be specific to my code, but I managed to reproduce the first one https://stackblitz.com/edit/vitejs-vite-ra2ipx?file=src%2Flib%2FFileInput.test.js It happens when the input has binded $state property (see FileInput.svelte) |
|
@cezaryszymanski I see! Yup, there seems to be a difference between how real browsers handle setting Since this issue is independent of Svelte and In the meantime, for your tests, I would recommend:
|
|
I have a local variable in my component that keeps track of whether a typewriter transition effect is playing or not. When testing, the Any ideas on how this might best be handled? Tests were passing in Svelte 4 but not now in Svelte 5. |
|
Hey @amosjyng! You'd likely need a more complicated fake to simulate transitions - you could try reading through the Svelte internal transition source code to get an idea of what it uses from That being said, I don't think trying to test animation logic in a fake DOM environment with a mocked out Instead, I recommend moving these tests to a real browser (via Vitest or Playright) and/or restructuring your code so that the interesting logic is wrapped up in some structure you can test easily. Then, add that unit to a component that simply does wire-up and doesn't have interesting logic nor direct tests of its own |
|
Ah, good point, thanks @mcous! I will give browser tests a try. |
|
Another issue I've noticed is that Vitest stack traces no longer have accurate line numbers for Svelte files. For example, if you look at KieranP's stack trace above, the actual error is not from the output line Another example I have: or |
|
I'm facing a similar issue to the one someone reported on SO today. The unit test works fine until I add a
I can reproduce the issue with a Svelte sample lib repo: https://github.com/peterpeterparker/svelte-vite-testing-library-css |
|
@peterpeterparker i don't see the I also don't see any testing library code in the stacktrace - it seems to be failing at the compile step. Is this issue reproducible without testing-library, just using the basic testing setup from the Svelte docs? If so, this may be an issue to file with the Svelte itself or their Vite plugin. I took a closer look at your reproduction, and realized it does not include testing-library nor does it follow the instructions in the Svelte doc. You may want to consider updating it to see if you get the same behavior |
|
You're absolutely right, @mcous — there's no P.S. Thanks for the basic testing setup suggestion as well. I tried it earlier this morning, but unfortunately, it didn’t resolve the issue either. |
|
For those running into this animation error: A few folks have suggested splitting out the business logic and animation code, so that it's easier to test things independently. I've managed with this approach, with the addition of a conditional check that controls whether the animation should run. It has the added benefit of making animation related code more reusable. If you are working with other developers, you can keep animations in one central place, as opposed to having hardcoded transitions scattered across various components. // Animations/FlyInOutAnimation.svelte
<script lang="ts">
import {fly} from "svelte/transition";
const {className = "", ...rest} = $props();
const isTestEnv = process?.env?.NODE_ENV === "test";
const inFlyOptions = {x: 1000, duration: 250};
const outFlyOptions = { x: 1000, duration: 750};
// This conditionally applies the transition, so that it still works in the browser, but won't run in a test environment
function transition(node, options) {
if (!isTestEnv) {
return fly(node, options);
}
}
</script>
<div class={className} in:transition={inFlyOptions} out:transition={outFlyOptions} {...rest}>
<slot></slot>
</div>With this, instead of doing something like: <div in:fly={{ x: 1000, duration: 250 }} out:fly={{ x: 1000, duration: 500 }}> ... </div>You could use the animation component <FlyInOutAnimation> ... </FlyInOutAnimation>Obviously this won't work in all scenarios, and it may make more sense to use service functions to abstract this away depending on how your code is organized ... but you get the idea. Hopefully this helps. |
and others
Hello, @mcous has hijacked this post! We've launched
experimentalSvelte 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/[email protected]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:
This issue body was partially generated by patch-package.
The text was updated successfully, but these errors were encountered: