123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
import { StrictMode, Suspense, useEffect } from 'react'import { fireEvent, render } from '@testing-library/react'import { Atom, atom, useAtomValue, useSetAtom } from 'jotai'import { loadable } from 'jotai/utils'import { getTestProvider } from '../testUtils'
const Provider = getTestProvider()
it('loadable turns suspense into values', async () => {  let resolve: (x: number) => void = () => {}  const asyncAtom = atom(() => {    return new Promise<number>((r) => (resolve = r))  })
  const { findByText } = render(    <StrictMode>      <Provider>        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  await findByText('Loading...')  resolve(5)  await findByText('Data: 5')})
it('loadable turns errors into values', async () => {  let reject: (error: unknown) => void = () => {}  const asyncAtom = atom(() => {    return new Promise<number>((_res, rej) => (reject = rej))  })
  const { findByText } = render(    <StrictMode>      <Provider>        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  await findByText('Loading...')  reject(new Error('An error occurred'))  await findByText('Error: An error occurred')})
it('loadable turns primitive throws into values', async () => {  let reject: (error: unknown) => void = () => {}  const asyncAtom = atom(() => {    return new Promise<number>((_res, rej) => (reject = rej))  })
  const { findByText } = render(    <StrictMode>      <Provider>        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  await findByText('Loading...')  reject('An error occurred')  await findByText('An error occurred')})
it('loadable goes back to loading after re-fetch', async () => {  let resolve: (x: number) => void = () => {}  const refreshAtom = atom(0)  const asyncAtom = atom((get) => {    get(refreshAtom)    return new Promise<number>((r) => (resolve = r))  })
  const Refresh = () => {    const setRefresh = useSetAtom(refreshAtom)    return (      <>        <button onClick={() => setRefresh((value) => value + 1)}>          refresh        </button>      </>    )  }
  const { findByText, getByText } = render(    <StrictMode>      <Provider>        <Refresh />        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  getByText('Loading...')  resolve(5)  await findByText('Data: 5')  fireEvent.click(getByText('refresh'))  await findByText('Loading...')  resolve(6)  await findByText('Data: 6')})
it('loadable can recover from error', async () => {  let resolve: (x: number) => void = () => {}  let reject: (error: unknown) => void = () => {}  const refreshAtom = atom(0)  const asyncAtom = atom((get) => {    get(refreshAtom)    return new Promise<number>((res, rej) => {      resolve = res      reject = rej    })  })
  const Refresh = () => {    const setRefresh = useSetAtom(refreshAtom)    return (      <>        <button onClick={() => setRefresh((value) => value + 1)}>          refresh        </button>      </>    )  }
  const { findByText, getByText } = render(    <StrictMode>      <Provider>        <Refresh />        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  getByText('Loading...')  reject(new Error('An error occurred'))  await findByText('Error: An error occurred')  fireEvent.click(getByText('refresh'))  await findByText('Loading...')  resolve(6)  await findByText('Data: 6')})
it('loadable immediately resolves sync values', async () => {  const syncAtom = atom(5)  const effectCallback = jest.fn()
  const { getByText } = render(    <StrictMode>      <Provider>        <LoadableComponent          effectCallback={effectCallback}          asyncAtom={syncAtom}        />      </Provider>    </StrictMode>  )
  getByText('Data: 5')  expect(effectCallback.mock.calls).not.toContain(    expect.objectContaining({ state: 'loading' })  )  expect(effectCallback).toHaveBeenLastCalledWith({ state: 'hasData', data: 5 })})
it('loadable can use resolved promises syncronously', async () => {  const asyncAtom = atom(Promise.resolve(5))  const effectCallback = jest.fn()
  const ResolveAtomComponent = () => {    useAtomValue(asyncAtom)
    return <div>Ready</div>  }
  const { getByText, findByText, rerender } = render(    <StrictMode>      <Provider>        <Suspense fallback={null}>          <ResolveAtomComponent />        </Suspense>      </Provider>    </StrictMode>  )
  await findByText('Ready')
  rerender(    <StrictMode>      <Provider>        <LoadableComponent          effectCallback={effectCallback}          asyncAtom={asyncAtom}        />      </Provider>    </StrictMode>  )  getByText('Data: 5')
  expect(effectCallback.mock.calls).not.toContain(    expect.objectContaining({ state: 'loading' })  )  expect(effectCallback).toHaveBeenLastCalledWith({ state: 'hasData', data: 5 })})
it('loadable of a derived async atom does not trigger infinite loop (#1114)', async () => {  let resolve: (x: number) => void = () => {}  const baseAtom = atom(0)  const asyncAtom = atom((get) => {    get(baseAtom)    return new Promise<number>((r) => (resolve = r))  })
  const Trigger = () => {    const trigger = useSetAtom(baseAtom)    return (      <>        <button onClick={() => trigger((value) => value)}>trigger</button>      </>    )  }
  const { findByText, getByText } = render(    <StrictMode>      <Provider>        <Trigger />        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  getByText('Loading...')  fireEvent.click(getByText('trigger'))  resolve(5)  await findByText('Data: 5')})
it('loadable of a derived async atom with error does not trigger infinite loop (#1330)', async () => {  const baseAtom = atom(() => {    throw new Error('thrown in baseAtom')  })  const asyncAtom = atom(async (get) => {    get(baseAtom)    return ''  })
  const { findByText, getByText } = render(    <StrictMode>      <Provider>        <LoadableComponent asyncAtom={asyncAtom} />      </Provider>    </StrictMode>  )
  getByText('Loading...')  await findByText('Error: thrown in baseAtom')})
it('does not repeatedly attempt to get the value of an unresolved promise atom wrapped in a loadable (#1481)', async () => {  const baseAtom = atom(new Promise<number>(() => {}))
  let callsToGetBaseAtom = 0  const derivedAtom = atom((get) => {    callsToGetBaseAtom++    return get(baseAtom)  })
  render(    <StrictMode>      <Provider>        <LoadableComponent asyncAtom={derivedAtom} />      </Provider>    </StrictMode>  )
  // we need a small delay to reproduce the issue  await new Promise((r) => setTimeout(r, 10))  // depending on provider-less mode or versioned-write mode, there will be  // either 2 or 3 calls.  expect(callsToGetBaseAtom).toBeLessThanOrEqual(3)})
type LoadableComponentProps = {  asyncAtom: Atom<Promise<number> | Promise<string> | string | number>  effectCallback?: (loadableValue: any) => void}
const LoadableComponent = ({  asyncAtom,  effectCallback,}: LoadableComponentProps) => {  const value = useAtomValue(loadable(asyncAtom))
  useEffect(() => {    if (effectCallback) {      effectCallback(value)    }  }, [value, effectCallback])
  if (value.state === 'loading') {    return <>Loading...</>  }
  if (value.state === 'hasError') {    return <>{String(value.error)}</>  }
  // this is to ensure correct typing  const data: number | string = value.data
  return <>Data: {data}</>}