Skip to content
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

$derived needs a $effect.root to act reactive #14997

Closed
sanderhahn opened this issue Jan 13, 2025 · 5 comments
Closed

$derived needs a $effect.root to act reactive #14997

sanderhahn opened this issue Jan 13, 2025 · 5 comments

Comments

@sanderhahn
Copy link
Contributor

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
Copy link
Contributor

trueadm commented Jan 13, 2025

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
Copy link
Member

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
Copy link
Contributor Author

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

@Thiagolino8
Copy link

@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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants