import { StrictMode, Suspense, useEffect, useRef } from 'react'import { fireEvent, render } from '@testing-library/react'import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'import { derive, underive } from 'valtio/utils'
const sleep = (ms: number) => new Promise((resolve) => { setTimeout(resolve, ms) })
it('basic derive', async () => { const computeDouble = jest.fn((x) => x * 2) const state = proxy({ text: '', count: 0, }) const derived = derive({ doubled: (get) => computeDouble(get(state).count), })
const callback = jest.fn() subscribe(derived, callback)
expect(snapshot(derived)).toMatchObject({ doubled: 0 }) expect(computeDouble).toBeCalledTimes(1) expect(callback).toBeCalledTimes(0)
state.count += 1 await Promise.resolve() expect(snapshot(derived)).toMatchObject({ doubled: 2 }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)
state.text = 'a' await Promise.resolve() expect(snapshot(derived)).toMatchObject({ doubled: 2 }) expect(computeDouble).toBeCalledTimes(3) await Promise.resolve() expect(callback).toBeCalledTimes(1)})
it('derive another proxy', async () => { const computeDouble = jest.fn((x) => x * 2) const state = proxy({ text: '', count: 0, }) const anotherState = proxy({}) derive( { doubled: (get) => computeDouble(get(state).count), }, { proxy: anotherState, } )
const callback = jest.fn() subscribe(anotherState, callback)
expect(snapshot(anotherState)).toMatchObject({ doubled: 0 }) expect(computeDouble).toBeCalledTimes(1) expect(callback).toBeCalledTimes(0)
state.count += 1 await Promise.resolve() expect(snapshot(anotherState)).toMatchObject({ doubled: 2 }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)
state.text = 'a' await Promise.resolve() expect(snapshot(anotherState)).toMatchObject({ doubled: 2 }) expect(computeDouble).toBeCalledTimes(3) await Promise.resolve() expect(callback).toBeCalledTimes(1)})
it('derive with self', async () => { const computeDouble = jest.fn((x) => x * 2) const state = proxy({ text: '', count: 0, }) derive( { doubled: (get) => computeDouble(get(state).count), }, { proxy: state, } )
const callback = jest.fn() subscribe(state, callback)
expect(snapshot(state)).toMatchObject({ text: '', count: 0, doubled: 0 }) expect(computeDouble).toBeCalledTimes(1) expect(callback).toBeCalledTimes(0)
state.count += 1 await Promise.resolve() expect(snapshot(state)).toMatchObject({ text: '', count: 1, doubled: 2 }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)
state.text = 'a' await Promise.resolve() expect(snapshot(state)).toMatchObject({ text: 'a', count: 1, doubled: 2 }) expect(computeDouble).toBeCalledTimes(3) await Promise.resolve() expect(callback).toBeCalledTimes(2)})
it('derive with two dependencies', async () => { const computeSum = jest.fn((x, y) => x + y) const state1 = proxy({ count: 1 }) const state2 = proxy({ count: 10 }) const derived = derive({ sum: (get) => computeSum(get(state1).count, get(state2).count), })
const callback = jest.fn() subscribe(derived, callback)
expect(snapshot(derived)).toMatchObject({ sum: 11 }) expect(computeSum).toBeCalledTimes(1) expect(callback).toBeCalledTimes(0)
state1.count += 1 await Promise.resolve() expect(snapshot(derived)).toMatchObject({ sum: 12 }) expect(computeSum).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)
state1.count += 1 state2.count += 10 await Promise.resolve() expect(snapshot(derived)).toMatchObject({ sum: 23 }) expect(computeSum).toBeCalledTimes(3) await Promise.resolve() expect(callback).toBeCalledTimes(2)})
it('async derive', async () => { const state = proxy({ count: 0 }) derive( { delayedCount: async (get) => { await sleep(300) return get(state).count + 1 }, }, { proxy: state } )
const Counter = () => { const snap = useSnapshot( state as { count: number; delayedCount: Promise<number> } ) return ( <> <div> count: {snap.count}, delayedCount: {snap.delayedCount} </div> <button onClick={() => ++state.count}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Suspense fallback="loading"> <Counter /> </Suspense> </StrictMode> )
await findByText('loading') await findByText('count: 0, delayedCount: 1')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('count: 1, delayedCount: 2')})
it('nested emulation with derive', async () => { const computeDouble = jest.fn((x) => x * 2) const state = proxy({ text: '', math: { count: 0 } }) derive( { doubled: (get) => computeDouble(get(state.math).count), }, { proxy: state.math, sync: true } )
const callback = jest.fn() subscribe(state, callback)
expect(snapshot(state)).toMatchObject({ text: '', math: { count: 0, doubled: 0 }, }) expect(computeDouble).toBeCalledTimes(1) expect(callback).toBeCalledTimes(0)
state.math.count += 1 await Promise.resolve() expect(snapshot(state)).toMatchObject({ text: '', math: { count: 1, doubled: 2 }, }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)
state.text = 'a' await Promise.resolve() expect(snapshot(state)).toMatchObject({ text: 'a', math: { count: 1, doubled: 2 }, }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(2)})
it('derive with array.pop', async () => { const state = proxy({ arr: [{ n: 1 }, { n: 2 }, { n: 3 }], }) derive( { nums: (get) => get(state.arr).map((item) => item.n), }, { proxy: state } )
expect(snapshot(state)).toMatchObject({ arr: [{ n: 1 }, { n: 2 }, { n: 3 }], nums: [1, 2, 3], })
state.arr.pop() await Promise.resolve() expect(snapshot(state)).toMatchObject({ arr: [{ n: 1 }, { n: 2 }], nums: [1, 2], })})
it('basic underive', async () => { const computeDouble = jest.fn((x) => x * 2) const state = proxy({ count: 0 }) const derived = derive({ doubled: (get) => computeDouble(get(state).count), })
const callback = jest.fn() subscribe(derived, callback)
expect(snapshot(derived)).toMatchObject({ doubled: 0 }) expect(computeDouble).toBeCalledTimes(1) expect(callback).toBeCalledTimes(0)
state.count += 1 await Promise.resolve() expect(snapshot(derived)).toMatchObject({ doubled: 2 }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)
underive(derived)
state.count += 1 await Promise.resolve() expect(snapshot(derived)).toMatchObject({ doubled: 2 }) expect(computeDouble).toBeCalledTimes(2) await Promise.resolve() expect(callback).toBeCalledTimes(1)})
describe('glitch free', () => { it('basic (#296)', async () => { const state = proxy({ value: 0 }) const derived1 = derive({ value: (get) => get(state).value }) const derived2 = derive({ value: (get) => get(derived1).value }) const computeValue = jest.fn((get) => { const v0 = get(state).value const v1 = get(derived1).value const v2 = get(derived2).value return `v0: ${v0}, v1: ${v1}, v2: ${v2}` }) const derived3 = derive({ value: computeValue })
const App = () => { const snap = useSnapshot(derived3) const commitsRef = useRef(1) useEffect(() => { commitsRef.current += 1 }) return ( <div> value: {snap.value} (commits: {commitsRef.current}) <button onClick={() => ++state.value}>button</button> </div> ) }
const { getByText, findByText } = render( <> <App /> </> )
await findByText('value: v0: 0, v1: 0, v2: 0 (commits: 1)') expect(computeValue).toBeCalledTimes(1)
fireEvent.click(getByText('button')) await findByText('value: v0: 1, v1: 1, v2: 1 (commits: 2)') expect(computeValue).toBeCalledTimes(2) })
it('same value', async () => { const state = proxy({ value: 0 }) const derived1 = derive({ value: (get) => get(state).value * 0, }) const derived2 = derive({ value: (get) => get(derived1).value * 0, }) const computeValue = jest.fn((get) => { const v0 = get(state).value const v1 = get(derived1).value const v2 = get(derived2).value return v0 + (v1 - v2) }) const derived3 = derive({ value: (get) => computeValue(get), })
const App = () => { const snap = useSnapshot(derived3) return ( <div> value: {snap.value} <button onClick={() => ++state.value}>button</button> </div> ) }
const { getByText, findByText } = render( <StrictMode> <App /> </StrictMode> )
await findByText('value: 0') expect(computeValue).toBeCalledTimes(1)
fireEvent.click(getByText('button')) await findByText('value: 1') expect(computeValue).toBeCalledTimes(2) })
it('double chain', async () => { const state = proxy({ value: 0 }) const derived1 = derive({ value: (get) => get(state).value, }) const derived2 = derive({ value: (get) => get(derived1).value, }) const derived3 = derive({ value: (get) => get(derived2).value, }) const computeValue = jest.fn((get) => { const v0 = get(state).value const v1 = get(derived1).value const v2 = get(derived2).value const v3 = get(derived3).value return v0 + (v1 - v2) + v3 * 0 }) const derived4 = derive({ value: (get) => computeValue(get), })
const App = () => { const snap = useSnapshot(derived4) return ( <div> value: {snap.value} <button onClick={() => ++state.value}>button</button> </div> ) }
const { getByText, findByText } = render( <StrictMode> <App /> </StrictMode> )
await findByText('value: 0') expect(computeValue).toBeCalledTimes(1)
fireEvent.click(getByText('button')) await findByText('value: 1') expect(computeValue).toBeCalledTimes(2) })})
describe('two derived properties', () => { type State = { a: number derived1?: unknown derived2?: unknown }
it('two derived properties both returning primitive values (#349)', async () => { const state: State = proxy({ a: 1 }) derive( { derived1: (get) => { get(state).a return 1 }, }, { proxy: state } ) derive( { derived2: (get) => { get(state).a return 1 }, }, { proxy: state } ) await Promise.resolve() expect(state.derived1).toBeDefined() expect(state.derived2).toBeDefined() })
it('two derived properties both returning non primitive values, defined at the same time (#349)', async () => { const state: State = proxy({ a: 1 }) derive( { derived1: (get) => { get(state).a return {} }, derived2: (get) => { get(state).a return {} }, }, { proxy: state } ) await Promise.resolve() expect(state.derived1).toBeDefined() expect(state.derived2).toBeDefined() })
it('two derived properties both returning non primitive values (#349)', async () => { const state: State = proxy({ a: 1 }) derive( { derived1: (get) => { get(state).a return {} }, }, { proxy: state } ) derive( { derived2: (get) => { get(state).a return {} }, }, { proxy: state } ) await Promise.resolve() expect(state.derived1).toBeDefined() expect(state.derived2).toBeDefined() })})