Skip to main content
Module

x/jotai/tests/async.test.tsx

👻 Primitive and flexible state management for React
Go to Latest
File
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140
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, itSkipIfVersionedWrite } from './testUtils'
const Provider = getTestProvider()
jest.mock('../src/core/useDebugState.ts')
const useCommitCount = () => { const commitCountRef = useRef(1) useEffect(() => { commitCountRef.current += 1 }) return commitCountRef.current}
itSkipIfVersionedWrite('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( <> <Provider> <Counter /> <Suspense fallback="loading"> <DelayedCounter /> </Suspense> </Provider> </> )
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('does not show async stale result on derived atom', async () => { const countAtom = atom(0) const asyncAlwaysNullAtom = atom(async (get) => { get(countAtom) await new Promise((r) => setTimeout(r, 100)) return null }) const derivedAtom = atom((get) => get(asyncAlwaysNullAtom))
const DisplayAsyncValue = () => { const [asyncValue] = useAtom(asyncAlwaysNullAtom)
return <div>async value: {JSON.stringify(asyncValue)}</div> }
const DisplayDerivedValue = () => { const [derivedValue] = useAtom(derivedAtom) return <div>derived value: {JSON.stringify(derivedValue)}</div> }
const Test = () => { const [count, setCount] = useAtom(countAtom) return ( <div> <div>count: {count}</div> <Suspense fallback={<div>loading async value</div>}> <DisplayAsyncValue /> </Suspense> <Suspense fallback={<div>loading derived value</div>}> <DisplayDerivedValue /> </Suspense> <button onClick={() => setCount((c) => c + 1)}>button</button> </div> ) }
const { getByText, queryByText } = render( <StrictMode> <Provider> <Test /> </Provider> </StrictMode> )
await waitFor(() => { getByText('count: 0') getByText('loading async value') getByText('loading derived value') }) await waitFor(() => { expect(queryByText('loading async value')).toBeNull() expect(queryByText('loading derived value')).toBeNull() }) await waitFor(() => { getByText('async value: null') getByText('derived value: null') })
fireEvent.click(getByText('button'))
await waitFor(() => { getByText('count: 1') getByText('loading async value') getByText('loading derived value') }) await waitFor(() => { expect(queryByText('loading async value')).toBeNull() expect(queryByText('loading derived value')).toBeNull() }) await waitFor(() => { getByText('async value: null') getByText('derived value: null') })})
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, 500)) 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, 100)) 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, 100)) return 'ready' }) const someAtom2 = atom(async () => { await new Promise((r) => setTimeout(r, 100)) 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, 100)) 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( <> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </> )
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, 1)) return get(countAtom) }, async (get, set) => { await new Promise((r) => setTimeout(r, 1)) 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( <> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </> )
await findByText('count: 1')
fireEvent.click(getByText('button')) await findByText('no child')
fireEvent.click(getByText('button')) await findByText('count: 2')})
// It passes with React 18 thoughitSkipIfVersionedWrite('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( <> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </> )
await findByText('loading') await waitFor(() => { getByText('count: 1') getByText('text: resolved') })})
// It passes with React 18 thoughitSkipIfVersionedWrite( '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( <> <Provider> <Suspense fallback="loading"> <Parent /> </Suspense> </Provider> </> )
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)) const asyncAtom = atom(null, (get, set, _arg) => { set( countAtom, Promise.resolve(get(countAtom)).then( (c) => new Promise((r) => setTimeout(() => r(c + 1), 500)) ) ) })
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, 500)) 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, 100)) 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<Promise<number>>>() const getAsyncAtom = (n: number) => { if (!atomCache.has(n)) { atomCache.set( n, atom(async () => { await new Promise((r) => setTimeout(r, 500)) return n + 10 }) ) } return atomCache.get(n) as Atom<Promise<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( <> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </> )
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'), 100) ) 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, 1)) 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> <Counter /> </Provider> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('button')) 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>(() => {})) 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>(() => {})) const count2Atom = atom(new Promise<number>(() => {})) 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')})
// FIXME will revisit this after react 18, feel free to tackle thisitSkipIfVersionedWrite('set two promise atoms at once', async () => { const count1Atom = atom(new Promise<number>(() => {})) const count2Atom = atom(new Promise<number>(() => {})) 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')})
it('async write chain', async () => { const countAtom = atom(0) const asyncWriteAtom = atom(null, async (_get, set, _arg) => { await new Promise((r) => setTimeout(r, 10)) set(countAtom, 2) }) const controlAtom = atom(null, async (_get, set, _arg) => { set(countAtom, 1) await set(asyncWriteAtom, null) await new Promise((r) => setTimeout(r, 1)) set(countAtom, 3) })
const Counter = () => { const [count] = useAtom(countAtom) return <div>count: {count}</div> }
const Control = () => { const [, invoke] = useAtom(controlAtom) return <button onClick={invoke}>button</button> }
const { getByText, findByText } = render( <StrictMode> <Provider> <Counter /> <Control /> </Provider> </StrictMode> )
await findByText('count: 0')
fireEvent.click(getByText('button')) await findByText('count: 1') await findByText('count: 2') await findByText('count: 3')})
it('async atom double chain without setTimeout (#751)', async () => { const enabledAtom = atom(false) const asyncAtom = atom(async (get) => { const enabled = get(enabledAtom) if (!enabled) { return 'init' } await new Promise((r) => setTimeout(r, 100)) return 'ready' }) const derivedAsyncAtom = atom(async (get) => get(asyncAtom)) const anotherAsyncAtom = atom(async (get) => get(derivedAsyncAtom))
const AsyncComponent = () => { const [text] = useAtom(anotherAsyncAtom) return <div>async: {text}</div> }
const Parent = () => { // Use useAtom to reproduce the issue const [, setEnabled] = useAtom(enabledAtom) return ( <> <Suspense fallback="loading"> <AsyncComponent /> </Suspense> <button onClick={() => { setEnabled(true) }}> button </button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Parent /> </Provider> </StrictMode> )
await findByText('async: init')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('async: ready')})
it('async atom double chain with setTimeout', async () => { const enabledAtom = atom(false) const asyncAtom = atom(async (get) => { const enabled = get(enabledAtom) if (!enabled) { return 'init' } await new Promise((r) => setTimeout(r, 100)) return 'ready' }) const derivedAsyncAtom = atom(async (get) => { await new Promise((r) => setTimeout(r, 100)) return get(asyncAtom) }) const anotherAsyncAtom = atom(async (get) => { await new Promise((r) => setTimeout(r, 100)) return get(derivedAsyncAtom) })
const AsyncComponent = () => { const [text] = useAtom(anotherAsyncAtom) return <div>async: {text}</div> }
const Parent = () => { // Use useAtom to reproduce the issue const [, setEnabled] = useAtom(enabledAtom) return ( <> <Suspense fallback="loading"> <AsyncComponent /> </Suspense> <button onClick={() => { setEnabled(true) }}> button </button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Parent /> </Provider> </StrictMode> )
await findByText('async: init')
fireEvent.click(getByText('button')) await findByText('loading') await findByText('async: ready')})
it('update unmounted async atom with intermediate atom', async () => { const enabledAtom = atom(true) const countAtom = atom(1)
const intermediateAtom = atom((get) => { const count = get(countAtom) const enabled = get(enabledAtom) const tmpAtom = atom(async () => { if (!enabled) { return -1 } await new Promise((r) => setTimeout(r, 100)) return count * 2 }) return tmpAtom }) const derivedAtom = atom((get) => { const tmpAtom = get(intermediateAtom) return get(tmpAtom) })
const DerivedCounter = () => { const [derived] = useAtom(derivedAtom) return <div>derived: {derived}</div> }
const Control = () => { const [, setEnabled] = useAtom(enabledAtom) const [, setCount] = useAtom(countAtom) return ( <> <button onClick={() => setCount((c) => c + 1)}>increment count</button> <button onClick={() => setEnabled((x) => !x)}>toggle enabled</button> </> ) }
const { getByText, findByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <DerivedCounter /> </Suspense> <Control /> </Provider> </StrictMode> )
await findByText('loading') await findByText('derived: 2')
fireEvent.click(getByText('toggle enabled')) fireEvent.click(getByText('increment count')) await findByText('derived: -1')
fireEvent.click(getByText('toggle enabled')) await findByText('loading') await findByText('derived: 4')})
it('multiple derived atoms with dependency chaining and async write (#813)', async () => { const responseBaseAtom = atom<{ name: string }[] | null>(null)
const responseAtom = atom( (get) => get(responseBaseAtom), (_get, set) => { setTimeout(() => { set(responseBaseAtom, [{ name: 'alpha' }, { name: 'beta' }]) }, 1) } ) responseAtom.onMount = (init) => { init() }
const mapAtom = atom((get) => get(responseAtom)) const itemA = atom((get) => get(mapAtom)?.[0]) const itemB = atom((get) => get(mapAtom)?.[1]) const itemAName = atom((get) => get(itemA)?.name) const itemBName = atom((get) => get(itemB)?.name)
const App = () => { const [aName] = useAtom(itemAName) const [bName] = useAtom(itemBName) return ( <> <div>aName: {aName}</div> <div>bName: {bName}</div> </> ) }
const { getByText } = render( <StrictMode> <Provider> <App /> </Provider> </StrictMode> )
await waitFor(() => { getByText('aName: alpha') getByText('bName: beta') })})