`$derived` needs a `$effect.root` to act reactive

[sanderhahn]

Describe the bug

As part of asking about how the testing setup of vitest is (#14900). A solution was provided that introduces a $derived, however that example doesn't work without an explict $effect.root. Multiple people have claimed that this should just work without the $effect.root, however this doesn't seem to be the case. At the moment I am not the biggest expert in the Svelte 5 reactivity story, so please correct me if this issue is invalid.

Reproduction

An example is provided by @Thiagolino8:
https://stackblitz.com/edit/vitejs-vite-lqzixy57?file=src%2Fmultiplier.svelte.test.ts

Logs

No response

System Info

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1
    Memory: 160.63 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: 9.15.3 - ~/.npm-packages/bin/pnpm
    bun: 1.1.43 - ~/.bun/bin/bun
  Browsers:
    Safari: 18.2

Severity

annoyance

[trueadm]

This looks an issue with the compilation, if you look at the output generated it's treating it like server output and removing the runes. $effect.root works because it's not actually running anything – try changing the other test case to expect(double.value).toEqual(50);.

@dominikg It looks like they have [browser] condition in their vite.config.js is there anything else missing to make this work right?

[dominikg]

here's an example for a vitest setup that allows you to test .svelte.js files with the browser condition but other files with the node condition: https://github.com/dominikg/vitest-example-svelte5

[sanderhahn]

The issue indeed is working inside your repro, so I will close this issue.
Thank you for the response!

[Thiagolino8]

@dominikg, If all that setup is needed to test svelte code then both the documentation and the cli add command need to be fixed

[dominikg]

this is pending vitest@3 release which should come soon sveltejs/cli#311