Skip to main content
Module

x/jotai/tests/async.test.tsx

👻 Primitive and flexible state management for React
Go to Latest
File
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
import { StrictMode, Suspense, useEffect, useRef } from 'react'import { fireEvent, render, waitFor } from '@testing-library/react'import { atom, useAtom } from 'jotai'import type { Atom } from 'jotai'import { getTestProvider } from './testUtils'
const Provider = getTestProvider()
const useCommitCount = () => { const commitCountRef = useRef(1) useEffect(() => { commitCountRef.current += 1 }) return commitCountRef.current}
it('does not show async stale result', async () => { const countAtom = atom(0) const asyncCountAtom = atom(async (get) => { await new Promise((r) => setTimeout(r, 100)) return get(countAtom) })
const committed: number[] = []
const Counter = () => { const [count, setCount] = useAtom(countAtom) const onClick = async () => { setCount((c) => c + 1) await new Promise((r) => setTimeout(r, 10)) setCount((c) => c + 1) } return ( <> <div>count: {count}</div> <button onClick={onClick}>button</button> </> ) }
const DelayedCounter = () => { const [delayedCount] = useAtom(asyncCountAtom) useEffect(() => { committed.push(delayedCount) }) return <div>delayedCount: {delayedCount}</div> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> <Suspense fallback="loading"> <DelayedCounter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await waitFor(() => { getByText('count: 0') getByText('delayedCount: 0') }) expect(committed).toEqual([0])
fireEvent.click(getByText('button')) await findByText('loading') await waitFor(() => { getByText('count: 2') getByText('delayedCount: 2') }) expect(committed).toEqual([0, 2])})
it('works with async get with extra deps', async () => { const countAtom = atom(0) const anotherAtom = atom(-1) const asyncCountAtom = atom(async (get) => { get(anotherAtom) await new Promise((r) => setTimeout(r, 10)) return get(countAtom) })
const Counter = () => { const [count, setCount] = useAtom(countAtom) return ( <> <div>count: {count}</div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const DelayedCounter = () => { const [delayedCount] = useAtom(asyncCountAtom) return <div>delayedCount: {delayedCount}</div> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> <DelayedCounter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await waitFor(() => { getByText('count: 0') getByText('delayedCount: 0') }) fireEvent.click(getByText('button')) await findByText('loading') await waitFor(() => { getByText('count: 1') getByText('delayedCount: 1') })})
it('reuses promises on initial read', async () => { let invokeCount = 0 const asyncAtom = atom(async () => { invokeCount += 1 await new Promise((r) => setTimeout(r, 10)) return 'ready' })
const Child = () => { const [str] = useAtom(asyncAtom) return <div>{str}</div> }
const { findByText, findAllByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Child /> <Child /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findAllByText('ready') expect(invokeCount).toBe(1)})
it('uses multiple async atoms at once', async () => { const someAtom = atom(async () => { await new Promise((r) => setTimeout(r, 10)) return 'ready' }) const someAtom2 = atom(async () => { await new Promise((r) => setTimeout(r, 10)) return 'ready2' })
const Component = () => { const [some] = useAtom(someAtom) const [some2] = useAtom(someAtom2) return ( <> <div> {some} {some2} </div> </> ) }
const { findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Component /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('ready ready2')})
it('uses async atom in the middle of dependency chain', async () => { const countAtom = atom(0) const asyncCountAtom = atom(async (get) => { await new Promise((r) => setTimeout(r, 10)) return get(countAtom) }) const delayedCountAtom = atom((get) => get(asyncCountAtom))
const Counter = () => { const [count, setCount] = useAtom(countAtom) const [delayedCount] = useAtom(delayedCountAtom) return ( <> <div> count: {count}, delayed: {delayedCount} </div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 0, delayed: 0')
fireEvent.click(getByText('button')) // no loading await findByText('count: 1, delayed: 1')})
it('updates an async atom in child useEffect on remount without setTimeout', async () => { const toggleAtom = atom(true) const countAtom = atom(0) const asyncCountAtom = atom( async (get) => get(countAtom), async (get, set) => set(countAtom, get(countAtom) + 1) )
const Counter = () => { const [count, incCount] = useAtom(asyncCountAtom) useEffect(() => { incCount() }, [incCount]) return <div>count: {count}</div> }
const Parent = () => { const [toggle, setToggle] = useAtom(toggleAtom) return ( <> <button onClick={() => setToggle((x) => !x)}>button</button> {toggle ? <Counter /> : <div>no child</div>} </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </StrictMode> )
await findByText('count: 1')
fireEvent.click(getByText('button')) await findByText('no child')
fireEvent.click(getByText('button')) await findByText('count: 2')})
it('updates an async atom in child useEffect on remount', async () => { const toggleAtom = atom(true) const countAtom = atom(0) const asyncCountAtom = atom( async (get) => { await new Promise((r) => setTimeout(r, 10)) return get(countAtom) }, async (get, set) => { await new Promise((r) => setTimeout(r, 10)) set(countAtom, get(countAtom) + 1) } )
const Counter = () => { const [count, incCount] = useAtom(asyncCountAtom) useEffect(() => { incCount() }, [incCount]) return <div>count: {count}</div> }
const Parent = () => { const [toggle, setToggle] = useAtom(toggleAtom) return ( <> <button onClick={() => setToggle((x) => !x)}>button</button> {toggle ? <Counter /> : <div>no child</div>} </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </StrictMode> )
await findByText('count: 1')
fireEvent.click(getByText('button')) await findByText('no child')
fireEvent.click(getByText('button')) await findByText('count: 2')})
it('async get and useEffect on parent', async () => { const countAtom = atom(0) const asyncAtom = atom(async (get) => { const count = get(countAtom) if (!count) return 'none' return 'resolved' })
const AsyncComponent = () => { const [text] = useAtom(asyncAtom) return <div>text: {text}</div> }
const Parent = () => { const [count, setCount] = useAtom(countAtom) useEffect(() => { setCount((c) => c + 1) }, [setCount]) return ( <> <div>count: {count}</div> <button onClick={() => setCount((c) => c + 1)}>button</button> <AsyncComponent /> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await waitFor(() => { getByText('count: 1') getByText('text: resolved') })})
it('async get with another dep and useEffect on parent', async () => { const countAtom = atom(0) const derivedAtom = atom((get) => get(countAtom)) const asyncAtom = atom(async (get) => { const count = get(derivedAtom) if (!count) return 'none' return count })
const AsyncComponent = () => { const [count] = useAtom(asyncAtom) return <div>async: {count}</div> }
const Parent = () => { const [count, setCount] = useAtom(countAtom) useEffect(() => { setCount((c) => c + 1) }, [setCount]) return ( <> <div>count: {count}</div> <button onClick={() => setCount((c) => c + 1)}>button</button> <AsyncComponent /> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await waitFor(() => { getByText('count: 1') getByText('async: 1') })
fireEvent.click(getByText('button')) await waitFor(() => { getByText('count: 2') getByText('async: 2') })})
it('set promise atom value on write (#304)', async () => { const countAtom = atom(Promise.resolve(0)) countAtom.debugLabel = 'countAtom' const asyncAtom = atom(null, (get, set, _arg) => { set( countAtom, Promise.resolve(get(countAtom)).then((c) => c + 1) ) }) asyncAtom.debugLabel = 'asyncAtom'
const Counter = () => { const [count] = useAtom(countAtom) return <div>count: {count * 1}</div> }
const Parent = () => { const [, dispatch] = useAtom(asyncAtom) return ( <> <Counter /> <button onClick={dispatch}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 0')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('count: 1')})
it('uses async atom double chain (#306)', async () => { const countAtom = atom(0) const asyncCountAtom = atom(async (get) => { await new Promise((r) => setTimeout(r, 10)) return get(countAtom) }) const delayedCountAtom = atom(async (get) => { return get(asyncCountAtom) })
const Counter = () => { const [count, setCount] = useAtom(countAtom) const [delayedCount] = useAtom(delayedCountAtom) return ( <> <div> count: {count}, delayed: {delayedCount} </div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 0, delayed: 0')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('count: 1, delayed: 1')})
it('uses an async atom that depends on another async atom', async () => { const asyncAtom = atom(async (get) => { await new Promise((r) => setTimeout(r, 10)) get(anotherAsyncAtom) return 1 }) const anotherAsyncAtom = atom(async () => { return 2 })
const Counter = () => { const [num] = useAtom(asyncAtom) return <div>num: {num}</div> }
const { findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('num: 1')})
it('a derived atom from a newly created async atom (#351)', async () => { const countAtom = atom(1) const atomCache = new Map<number, Atom<number>>() const getAsyncAtom = (n: number) => { if (!atomCache.has(n)) { atomCache.set( n, atom(async () => { await new Promise((r) => setTimeout(r, 10)) return n + 10 }) ) } return atomCache.get(n) as Atom<number> } const derivedAtom = atom((get) => get(getAsyncAtom(get(countAtom))))
const Counter = () => { const [, setCount] = useAtom(countAtom) const [derived] = useAtom(derivedAtom) return ( <> <div> derived: {derived}, commits: {useCommitCount()} </div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('derived: 11, commits: 1')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('derived: 12, commits: 2')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('derived: 13, commits: 3')})
it('Handles synchronously invoked async set (#375)', async () => { const loadingAtom = atom(false) const documentAtom = atom<string | undefined>(undefined) const loadDocumentAtom = atom(null, (_get, set) => { const fetch = async () => { set(loadingAtom, true) const response = await new Promise<string>((resolve) => setTimeout(() => resolve('great document'), 10) ) set(documentAtom, response) set(loadingAtom, false) } fetch() })
const ListDocuments = () => { const [loading] = useAtom(loadingAtom) const [document] = useAtom(documentAtom) const [, loadDocument] = useAtom(loadDocumentAtom)
useEffect(() => { loadDocument() }, [loadDocument])
return ( <> {loading && <div>loading</div>} {!loading && <div>{document}</div>} </> ) }
const { findByText } = render( <StrictMode> <Provider> <ListDocuments /> </Provider> </StrictMode> )
await findByText('loading') await findByText('great document')})
it('async write self atom', async () => { const countAtom = atom(0, async (get, set, _arg) => { set(countAtom, get(countAtom) + 1) await new Promise((r) => setTimeout(r, 100)) set(countAtom, -1) })
const Counter = () => { const [count, inc] = useAtom(countAtom) return ( <> <div>count: {count}</div> <button onClick={inc}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('button')) await findByText('loading') // write pending await findByText('count: -1')})
it('non suspense async write self atom with setTimeout (#389)', async () => { const countAtom = atom(0, (get, set, _arg) => { set(countAtom, get(countAtom) + 1) setTimeout(() => { set(countAtom, -1) }, 0) })
const Counter = () => { const [count, inc] = useAtom(countAtom) return ( <> <div>count: {count}</div> <button onClick={inc}>button</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Counter /> </Provider> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('button')) await findByText('count: 1') await findByText('count: -1')})
it('should override promise as atom value (#430)', async () => { const countAtom = atom( new Promise<number>((r) => setTimeout(() => r(-1), 3600 * 1000)) ) const setCountAtom = atom(null, (_get, set, arg: number) => { set(countAtom, Promise.resolve(arg)) })
const Counter = () => { const [count] = useAtom(countAtom) return <div>count: {count * 1}</div> }
const Control = () => { const [, setCount] = useAtom(setCountAtom) return <button onClick={() => setCount(1)}>button</button> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> <Control /> </Provider> </StrictMode> )
await findByText('loading')
fireEvent.click(getByText('button')) await findByText('count: 1')})
it('combine two promise atom values (#442)', async () => { const count1Atom = atom( new Promise<number>((r) => setTimeout(() => r(-1), 3600 * 1000)) ) const count2Atom = atom( new Promise<number>((r) => setTimeout(() => r(-1), 3600 * 1000)) ) const derivedAtom = atom((get) => get(count1Atom) + get(count2Atom)) const initAtom = atom(null, (_get, set) => { setTimeout(() => { set(count1Atom, Promise.resolve(1)) }, 100) setTimeout(() => { set(count2Atom, Promise.resolve(2)) }, 100) }) initAtom.onMount = (init) => { init() }
const Counter = () => { const [count] = useAtom(derivedAtom) return <div>count: {count}</div> }
const Control = () => { useAtom(initAtom) return null }
const { findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> <Control /> </Provider> </StrictMode> )
await findByText('loading') await findByText('count: 3')})
it('set two promise atoms at once', async () => { const count1Atom = atom( new Promise<number>((r) => setTimeout(() => r(-1), 3600 * 1000)) ) const count2Atom = atom( new Promise<number>((r) => setTimeout(() => r(-1), 3600 * 1000)) ) const derivedAtom = atom((get) => get(count1Atom) + get(count2Atom)) const setCountsAtom = atom(null, (_get, set) => { set(count1Atom, Promise.resolve(1)) set(count2Atom, Promise.resolve(2)) })
const Counter = () => { const [count] = useAtom(derivedAtom) return <div>count: {count}</div> }
const Control = () => { const [, setCounts] = useAtom(setCountsAtom) return <button onClick={() => setCounts()}>button</button> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> <Control /> </Provider> </StrictMode> )
await findByText('loading')
fireEvent.click(getByText('button')) await findByText('count: 3')})