Documentation: Using $dervied rune in tests

[TenCoKaciStromy]

Describe the problem

I run in problem with using $derived rune in test.

describe("lab", () => {
  it("can use $derived", () => {
    let firstName = $state<string>()
    let lastName = $state<string>()
    const fullName = $derived([firstName, lastName].join("+"))

    expect(fullName).toBe("+")

    firstName = "Alice"
    expect(fullName).toBe("Alice")
  })
})

The problem was, the code was not wrapped by $effect.root(() => { ... })().

The documentation for testing contains part for Using runes inside your test files with explanation about $effect, but as newbee I din't realize, that $derived is $effect.

Describe the proposed solution

I propose to add the example with test using $derived rune, explaining the $derived is actually $effect.

it("can use $derived", () => {
  $effect.root(() => {
    let firstName = $state<string>()
    let lastName = $state<string>()
    // because of $derived, the code must be wrapped by $effect.root(...)
    const fullName = $derived([firstName, lastName].join("+"))
    expect(fullName).toBe("+")

    firstName = "Alice"
    expect(fullName).toBe("Alice+")
  })()
})

Importance

nice to have

[TenCoKaciStromy]

If you approve this issue, I'd be happy to do a PR.

[Thiagolino8]

$derived don't need a $effect.root, the problem is the vitest configuration given in the documentation which is not enough to run the runes in browser mode
Your test passes when you use the $effect.root because effects do not exist in server mode, nothing is executed
#14900
#14997

[TenCoKaciStromy]

Thanks for clarification. In that case, maybe the proper client/server vitest configuration could be part of the documentation?

[Thiagolino8]

Definitely