123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
import { fireEvent, render } from '@testing-library/react'import { atom } from 'jotai'import { atomWithImmer, useImmerAtom, withImmer } from 'jotai/immer'import { getTestProvider } from '../testUtils'
const Provider = getTestProvider()
it('useImmerAtom with regular atom', async () => {  const countAtom = atom(0)
  const Parent = () => {    const [count, setCount] = useImmerAtom(countAtom)    return (      <>        <div>count: {count}</div>        <button onClick={() => setCount((draft) => (draft = draft + 1))}>          Increase        </button>        <button onClick={() => setCount((draft) => (draft = draft - 1))}>          Decrease        </button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Parent />    </Provider>  )
  await findByText('count: 0')
  fireEvent.click(getByText('Increase'))  await findByText('count: 1')
  fireEvent.click(getByText('Decrease'))  await findByText('count: 0')})
it('useImmerAtom with immer atom', async () => {  const countAtom = atomWithImmer(0)
  const Parent = () => {    const [count, setCount] = useImmerAtom(countAtom)    return (      <>        <div>count: {count}</div>        <button onClick={() => setCount((draft) => (draft = draft + 1))}>          Increase        </button>        <button onClick={() => setCount((draft) => (draft = draft - 1))}>          Decrease        </button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Parent />    </Provider>  )
  await findByText('count: 0')
  fireEvent.click(getByText('Increase'))  await findByText('count: 1')
  fireEvent.click(getByText('Decrease'))  await findByText('count: 0')})
it('useImmerAtom with derived immer atom', async () => {  const regularCountAtom = atom(0)  const countAtom = withImmer(regularCountAtom)
  const Parent = () => {    const [count, setCount] = useImmerAtom(countAtom)    return (      <>        <div>count: {count}</div>        <button onClick={() => setCount((draft) => (draft = draft + 1))}>          Increase        </button>        <button onClick={() => setCount((draft) => (draft = draft - 1))}>          Decrease        </button>      </>    )  }
  const { findByText, getByText } = render(    <Provider>      <Parent />    </Provider>  )
  await findByText('count: 0')
  fireEvent.click(getByText('Increase'))  await findByText('count: 1')
  fireEvent.click(getByText('Decrease'))  await findByText('count: 0')})