123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
import { useRef } from 'react'import { fireEvent, render, waitFor } from '@testing-library/react'import ReactDOM from 'react-dom'import { atom, useAtom } from 'jotai'import { getTestProvider } from './testUtils'
const Provider = getTestProvider()
// FIXME this is a hacky workaround temporarilyconst IS_REACT18 = !!(ReactDOM as any).createRoot
it('only relevant render function called (#156)', async () => {  const count1Atom = atom(0)  const count2Atom = atom(0)
  const Counter1 = () => {    const [count, setCount] = useAtom(count1Atom)    const renderCount = useRef(0)    ++renderCount.current    return (      <>        <div>          count1: {count} ({renderCount.current})        </div>        <button onClick={() => setCount((c) => c + 1)}>button1</button>      </>    )  }
  const Counter2 = () => {    const [count, setCount] = useAtom(count2Atom)    const renderCount = useRef(0)    ++renderCount.current    return (      <>        <div>          count2: {count} ({renderCount.current})        </div>        <button onClick={() => setCount((c) => c + 1)}>button2</button>      </>    )  }
  const { getByText } = render(    <Provider>      <Counter1 />      <Counter2 />    </Provider>  )
  await waitFor(() => {    getByText('count1: 0 (1)')    getByText('count2: 0 (1)')  })
  fireEvent.click(getByText('button1'))  await waitFor(() => {    if (IS_REACT18) {      getByText('count1: 1 (3)')    } else {      getByText('count1: 1 (2)')    }    getByText('count2: 0 (1)')  })
  fireEvent.click(getByText('button2'))  await waitFor(() => {    if (IS_REACT18) {      getByText('count1: 1 (3)')      getByText('count2: 1 (3)')    } else {      getByText('count1: 1 (2)')      getByText('count2: 1 (2)')    }  })})
it('only render once using atoms with write-only atom', async () => {  const count1Atom = atom(0)  const count2Atom = atom(0)  const incrementAtom = atom(null, (_get, set, _arg) => {    set(count1Atom, (c) => c + 1)    set(count2Atom, (c) => c + 1)  })
  const Counter = () => {    const [count1] = useAtom(count1Atom)    const [count2] = useAtom(count2Atom)    const renderCount = useRef(0)    ++renderCount.current    return (      <div>        count1: {count1}, count2: {count2} ({renderCount.current})      </div>    )  }
  const Control = () => {    const [, increment] = useAtom(incrementAtom)    return <button onClick={increment}>button</button>  }
  const { getByText, findByText } = render(    <Provider>      <Counter />      <Control />    </Provider>  )
  await findByText('count1: 0, count2: 0 (1)')
  fireEvent.click(getByText('button'))  if (IS_REACT18) {    await findByText('count1: 1, count2: 1 (3)')  } else {    await findByText('count1: 1, count2: 1 (2)')  }
  fireEvent.click(getByText('button'))  if (IS_REACT18) {    await findByText('count1: 2, count2: 2 (4)')  } else {    await findByText('count1: 2, count2: 2 (3)')  }})
it('useless re-renders with static atoms (#355)', async () => {  // check out https://codesandbox.io/s/m82r5 to see the expected re-renders  const countAtom = atom(0)  const unrelatedAtom = atom(0)
  const Counter = () => {    const [count, setCount] = useAtom(countAtom)    useAtom(unrelatedAtom)    const renderCount = useRef(0)    ++renderCount.current
    return (      <>        <div>          <p>            count: {count} ({renderCount.current})          </p>        </div>        <button onClick={() => setCount((c) => c + 1)}>button</button>      </>    )  }
  const { getByText, findByText } = render(    <Provider>      <Counter />    </Provider>  )
  await findByText('count: 0 (1)')
  fireEvent.click(getByText('button'))  if (IS_REACT18) {    await findByText('count: 1 (3)')  } else {    await findByText('count: 1 (2)')  }
  fireEvent.click(getByText('button'))  if (IS_REACT18) {    await findByText('count: 2 (4)')  } else {    await findByText('count: 2 (3)')  }})