@magic/test

Svelte 4 vs 5

Testing Svelte components with @magic/test has different capabilities depending on the Svelte version.

Feature Comparison

| Feature | Svelte 4 | Svelte 5 || :------ | :------: | :------: || Component mounting | ✅ | ✅ || Component interaction | ✅ | ✅ || Auto-export ($state/$derived) | ❌ | ✅ || Runes | ❌ | ✅ || compileSvelte | ✅ | ✅ || createStaticPage | ✅ | ✅ || SvelteKit mocks | ✅ | ✅ |

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