diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx index b27ad049c9..56e39edaf7 100644 --- a/tests/basic.test.tsx +++ b/tests/basic.test.tsx @@ -177,25 +177,40 @@ it('uses a write-only derived atom', async () => { const Counter: React.FC = () => { const [count] = useAtom(countAtom) - return
count: {count}
+ return ( +
+ commits: {useCommitCount()}, count: {count} +
+ ) } const Control: React.FC = () => { const [, increment] = useAtom(incrementCountAtom) - return + return ( + <> +
button commits: {useCommitCount()}
+ + + ) } - const { getByText, findByText } = render( + const { getByText } = render( ) - await findByText('count: 0') + await waitFor(() => { + getByText('commits: 1, count: 0') + getByText('button commits: 1') + }) fireEvent.click(getByText('button')) - await findByText('count: 1') + await waitFor(() => { + getByText('commits: 2, count: 1') + getByText('button commits: 1') + }) }) it('only re-renders if value has changed', async () => { diff --git a/tests/optimization.test.tsx b/tests/optimization.test.tsx index 0c23dcf94d..7e26ff064c 100644 --- a/tests/optimization.test.tsx +++ b/tests/optimization.test.tsx @@ -60,3 +60,44 @@ it('only relevant render function called (#156)', async () => { 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: React.FC = () => { + const [count1] = useAtom(count1Atom) + const [count2] = useAtom(count2Atom) + const renderCount = useRef(0) + ++renderCount.current + return ( +
+ count1: {count1}, count2: {count2} ({renderCount.current}) +
+ ) + } + + const Control: React.FC = () => { + const [, increment] = useAtom(incrementAtom) + return + } + + const { getByText, findByText } = render( + + + + + ) + + await findByText('count1: 0, count2: 0 (1)') + + fireEvent.click(getByText('button')) + await findByText('count1: 1, count2: 1 (2)') + + fireEvent.click(getByText('button')) + await findByText('count1: 2, count2: 2 (3)') +})