Best pactices for testing derived

[StephenStrickland]

Hey team,

I'm loving valtio and the great DX it provides.

I'm running into some issues testing my stores and I was curious if I was doing something wrong or approaching the problem incorrectly.

I have a derived store where I am trying to test some computed values. Here's some example code that's failing in jest.

 it('test', () => {
    const store = proxy({
        num: 1
    });

    const derived = derive({
        isTwo: (snap) => snap(store).num === 2
    }, 
    {
        proxy: store
    })

    subscribe(derived, () => {
        console.log("changed store", derived)
    })

    expect(derived.num).toEqual(1) //pass
    expect(derived.isTwo).toEqual(false) //pass
    derived.num = 2;
    expect(derived.isTwo).toEqual(true) //false, expected 'true' recevied 'false'
})

console output:

 console.log
      changed store { num: 2, isTwo: true }

 Expected: true
    Received: false

       97 |         expect(derived.isTwo).toEqual(false)
       98 |         derived.num = 2;
    >  99 |         expect(derived.isTwo).toEqual(true)
          |                               ^
      100 |
      101 |
      102 |     })

I tried playing around with jest timers, but to no avail. Is there better approach for testing derived proxies?

I've tested the above code on 1.2.8 and 1.2.11, same results.

[dai-shi]

The trick is valtio automatically batches multiple mutations and notification happens in async.
So, you need to test it in async:

await waitFor(() => {
  expect(derived.isTwo).toEqual(true)
})

Alternatively, you can disable the batching if that's what you'd expect:

    const derived = derive({
        isTwo: (snap) => snap(store).num === 2
    }, 
    {
        proxy: store,
        sync: true // to avoid batching
    })

Hope it helps.

[StephenStrickland]

Thanks @dai-shi , using testing-library will do the trick.