-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Test 2-way binding with only vitest
#2
Comments
Sadly, no. 😅 |
The way I started testing 2-way binding over at https://github.com/janosh/svelte-multiselect is with a wrapper component that dispatches when ever bound variables change. <script lang="ts">
// Test2WayBind.svelte
import MultiSelect, { type Option } from '$lib'
import { createEventDispatcher } from 'svelte'
export let options: Option[]
export let selected: Option[] = []
const dispatch = createEventDispatcher()
$: dispatch(`options-changed`, options)
$: dispatch(`selected-changed`, selected)
</script>
<MultiSelect bind:options bind:selected /> Here's a usage example that tests both inward and outward binding. |
We can create wrapper components for cases like two-way binding, named slots, and actions like this write-up from Swyx two years ago: Testing and Debugging Svelte. (It's worth checking even it's archived.) I'm not an experienced front-end tester. Sometimes it feels like I'm testing Svelte's internal or implementation as a component/ library author. I also doubted my approach when I wrote a lot of test harnesses for the sake of test coverage at work. Anyway, many kudos to @janosh, your great work, especially the testing, on |
Cool, didn't know about this. Thanks for sharing. |
Very cool resource! Thanks for putting this together. 👍
Do you know of a way to test 2-way binding without
'@testing-library/svelte'
and'svelte-htm'
, i.e. using onlyvitest
?Either way, feel free to close this right away.
The text was updated successfully, but these errors were encountered: