Svelte 4 vs 5

Testing Svelte components with @magic/test has different capabilities depending on the Svelte version.These limitations are inherited from svelte.

The svelte 4 functionality is not tested, we moved all our libraries to svelte 5, there be dragons.

Feature Comparison

What Works in Both

• Mounting components with mount()
• Component interaction via events (click, input, etc.)
• HTML assertions with html() and text()
• compileSvelte for source compilation
• createStaticPage for SvelteKit testing

Svelte 5 Only

• Auto-export of $state and $derived runes
• Rune-based reactivity

Svelte 5 automatically exports $state and $derived variables, making them accessible in tests without manual exports.

Workarounds for Svelte 4

Svelte 4 does not support automatic export of reactive state. To access component state in tests:

Manual Export in Svelte 4

<!-- Component.svelte --><script>  export let count = 0;</script><button on:click={() => count++}>  {count}</button>

import { mount } from '@magic/test'export default [  {    component: './Component.svelte',    fn: async ({ component }) => component.count,    expect: 0,    info: 'access exported count prop',  },]

Svelte 5 Auto-Export

<!-- Component.svelte (Svelte 5) --><script>  let count = $state(0)</script><button class="inc">+</button><span>{count}</span>

import { mount } from '@magic/test'export default [  {    component: './Component.svelte',    fn: async ({ component }) => component.count,  // works automatically!    expect: 0,    info: 'access $state without manual export',  },]

See Also