bradyisom
commented
1 month ago 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 $bindable() prop on my component.
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 checked prop:
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 bind:checked syntax in a parent component. I've tried setting the entire props to a $state(). I've also debugged down into the native Svelte mount() code, and it looks like it is expecting an object with a set() function on it to implement binding.
Any help or direction, or verification that there is a bug or issue here, would be appreciated.
mcous
KieranP
webJose
bleucitron
cezaryszymanski
amosjyng
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.5for 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.