deno.land / x / jotai@v1.8.4 / tests / utils / atomWithDefault.test.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190import { StrictMode, Suspense } from 'react'import { fireEvent, render } from '@testing-library/react'import { atom, useAtom } from 'jotai'import { RESET, atomWithDefault } from 'jotai/utils'import { getTestProvider } from '../testUtils'
const Provider = getTestProvider()
it('simple sync get default', async () => { const count1Atom = atom(1) const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
const Counter = () => { const [count1, setCount1] = useAtom(count1Atom) const [count2, setCount2] = useAtom(count2Atom) return ( <> <div> count1: {count1}, count2: {count2} </div> <button onClick={() => setCount1((c) => c + 1)}>button1</button> <button onClick={() => setCount2((c) => c + 1)}>button2</button> </> ) }
const { findByText, getByText } = render( <StrictMode> <Provider> <Counter /> </Provider> </StrictMode> )
await findByText('count1: 1, count2: 2')
fireEvent.click(getByText('button1')) await findByText('count1: 2, count2: 4')
fireEvent.click(getByText('button2')) await findByText('count1: 2, count2: 5')
fireEvent.click(getByText('button1')) await findByText('count1: 3, count2: 5')})
it('simple async get default', async () => { const count1Atom = atom(1) const count2Atom = atomWithDefault(async (get) => { await new Promise((r) => setTimeout(r, 100)) return get(count1Atom) * 2 })
const Counter = () => { const [count1, setCount1] = useAtom(count1Atom) const [count2, setCount2] = useAtom(count2Atom) return ( <> <div> count1: {count1}, count2: {count2} </div> <button onClick={() => setCount1((c) => c + 1)}>button1</button> <button onClick={() => setCount2((c) => c + 1)}>button2</button> </> ) }
const { findByText, getByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count1: 1, count2: 2')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('button1')) await findByText('loading') await findByText('count1: 2, count2: 4')
fireEvent.click(getByText('button2')) await findByText('count1: 2, count2: 5')
fireEvent.click(getByText('button1')) await findByText('count1: 3, count2: 5')})
it('refresh sync atoms to default values', async () => { const count1Atom = atom(1) const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
const Counter = () => { const [count1, setCount1] = useAtom(count1Atom) const [count2, setCount2] = useAtom(count2Atom) return ( <> <div> count1: {count1}, count2: {count2} </div> <button onClick={() => setCount1((c) => c + 1)}>button1</button> <button onClick={() => setCount2((c) => c + 1)}>button2</button> <button onClick={() => setCount2(RESET)}>Refresh count2</button> </> ) }
const { findByText, getByText } = render( <StrictMode> <Provider> <Counter /> </Provider> </StrictMode> )
await findByText('count1: 1, count2: 2')
fireEvent.click(getByText('button1')) await findByText('count1: 2, count2: 4')
fireEvent.click(getByText('button2')) await findByText('count1: 2, count2: 5')
fireEvent.click(getByText('button1')) await findByText('count1: 3, count2: 5')
fireEvent.click(getByText('Refresh count2')) await findByText('count1: 3, count2: 6')
fireEvent.click(getByText('button1')) await findByText('count1: 4, count2: 8')})
it('refresh async atoms to default values', async () => { const count1Atom = atom(1) const count2Atom = atomWithDefault(async (get) => { await new Promise((r) => setTimeout(r, 100)) return get(count1Atom) * 2 })
const Counter = () => { const [count1, setCount1] = useAtom(count1Atom) const [count2, setCount2] = useAtom(count2Atom) return ( <> <div> count1: {count1}, count2: {count2} </div> <button onClick={() => setCount1((c) => c + 1)}>button1</button> <button onClick={() => setCount2((c) => c + 1)}>button2</button> <button onClick={() => setCount2(RESET)}>Refresh count2</button> </> ) }
const { findByText, getByText } = render( <StrictMode> <Provider> <Suspense fallback="loading"> <Counter /> </Suspense> </Provider> </StrictMode> )
await findByText('loading') await findByText('count1: 1, count2: 2')
await new Promise((r) => setTimeout(r, 100)) fireEvent.click(getByText('button1')) await findByText('loading') await findByText('count1: 2, count2: 4')
fireEvent.click(getByText('button2')) await findByText('count1: 2, count2: 5')
fireEvent.click(getByText('button1')) await findByText('count1: 3, count2: 5')
fireEvent.click(getByText('Refresh count2')) await findByText('count1: 3, count2: 6')
fireEvent.click(getByText('button1')) await findByText('count1: 4, count2: 8')})
Version Info