diff --git a/tests/error.test.tsx b/tests/error.test.tsx index 7d64c2dbeb..134aa5a71e 100644 --- a/tests/error.test.tsx +++ b/tests/error.test.tsx @@ -280,7 +280,7 @@ it('can throw an error in async write function', async () => { } ) - const Counter: React.FC = () => { + const Counter = () => { const [count, dispatch] = useAtom(errorAtom) const onClick = async () => { try { diff --git a/tests/utils/selectAtom.test.tsx b/tests/utils/selectAtom.test.tsx index 49383436e6..9dcb368ae8 100644 --- a/tests/utils/selectAtom.test.tsx +++ b/tests/utils/selectAtom.test.tsx @@ -6,6 +6,14 @@ import { getTestProvider } from '../testUtils' const Provider = getTestProvider() +const useCommitCount = () => { + const commitCountRef = useRef(1) + useEffect(() => { + commitCountRef.current += 1 + }) + return commitCountRef.current +} + it('selectAtom works as expected', async () => { const bigAtom = atom({ a: 0, b: 'othervalue' }) const littleAtom = selectAtom(bigAtom, (v) => v.a) @@ -58,14 +66,6 @@ it('do not update unless equality function says value has changed', async () => (left, right) => JSON.stringify(left) === JSON.stringify(right) ) - const useCommitCount = () => { - const rerenderCountRef = useRef(0) - useEffect(() => { - rerenderCountRef.current += 1 - }) - return rerenderCountRef.current - } - const Parent = () => { const setValue = useUpdateAtom(bigAtom) return ( @@ -102,31 +102,31 @@ it('do not update unless equality function says value has changed', async () => ) await findByText('value: {"a":0}') - await findByText('commits: 0') + await findByText('commits: 1') fireEvent.click(getByText('copy')) await findByText('value: {"a":0}') - await findByText('commits: 0') + await findByText('commits: 1') fireEvent.click(getByText('increment')) await findByText('value: {"a":1}') - await findByText('commits: 1') + await findByText('commits: 2') fireEvent.click(getByText('copy')) await findByText('value: {"a":1}') - await findByText('commits: 1') + await findByText('commits: 2') fireEvent.click(getByText('increment')) await findByText('value: {"a":2}') - await findByText('commits: 2') + await findByText('commits: 3') fireEvent.click(getByText('copy')) await findByText('value: {"a":2}') - await findByText('commits: 2') + await findByText('commits: 3') fireEvent.click(getByText('increment')) await findByText('value: {"a":3}') - await findByText('commits: 3') + await findByText('commits: 4') fireEvent.click(getByText('copy')) await findByText('value: {"a":3}') - await findByText('commits: 3') + await findByText('commits: 4') }) it('useSelector with scope', async () => { diff --git a/tests/utils/useHydrateAtoms.test.tsx b/tests/utils/useHydrateAtoms.test.tsx index 3052d85a53..a48bf62b89 100644 --- a/tests/utils/useHydrateAtoms.test.tsx +++ b/tests/utils/useHydrateAtoms.test.tsx @@ -1,4 +1,4 @@ -import { FC, useRef } from 'react' +import { useEffect, useRef } from 'react' import { fireEvent, render } from '@testing-library/react' import { atom, useAtom } from 'jotai' import { useHydrateAtoms } from 'jotai/utils' @@ -9,7 +9,7 @@ const Provider = getTestProvider() it('useHydrateAtoms should only hydrate on first render', async () => { const countAtom = atom(0) - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue, setCount] = useAtom(countAtom) @@ -41,14 +41,16 @@ it('useHydrateAtoms should only hydrate on first render', async () => { it('useHydrateAtoms should not trigger unnessesary rerenders', async () => { const countAtom = atom(0) - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue, setCount] = useAtom(countAtom) - const renderCount = useRef(0) - ++renderCount.current + const commitCount = useRef(1) + useEffect(() => { + ++commitCount.current + }) return ( <> -
renders: {renderCount.current}
+
commits: {commitCount.current}
count: {countValue}
@@ -62,17 +64,17 @@ it('useHydrateAtoms should not trigger unnessesary rerenders', async () => { ) await findByText('count: 42') - await findByText('renders: 1') + await findByText('commits: 1') fireEvent.click(getByText('dispatch')) await findByText('count: 43') - await findByText('renders: 2') + await findByText('commits: 2') }) it('useHydrateAtoms should work with derived atoms', async () => { const countAtom = atom(0) const doubleAtom = atom((get) => get(countAtom) * 2) - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue, setCount] = useAtom(countAtom) const [doubleCount] = useAtom(doubleAtom) @@ -101,7 +103,7 @@ it('useHydrateAtoms should work with derived atoms', async () => { it('useHydrateAtoms can only restore an atom once', async () => { const countAtom = atom(0) - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue, setCount] = useAtom(countAtom) @@ -112,7 +114,7 @@ it('useHydrateAtoms can only restore an atom once', async () => { ) } - const Counter2: FC<{ count: number }> = ({ count }) => { + const Counter2 = ({ count }: { count: number }) => { useHydrateAtoms([[countAtom, count]]) const [countValue, setCount] = useAtom(countAtom) @@ -147,7 +149,7 @@ it('useHydrateAtoms can only restore an atom once', async () => { it('useHydrateAtoms can only restore an atom once', async () => { const countAtom = atom(0) - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue, setCount] = useAtom(countAtom) @@ -158,7 +160,7 @@ it('useHydrateAtoms can only restore an atom once', async () => { ) } - const Counter2: FC<{ count: number }> = ({ count }) => { + const Counter2 = ({ count }: { count: number }) => { useHydrateAtoms([[countAtom, count]]) const [countValue, setCount] = useAtom(countAtom) @@ -195,7 +197,7 @@ it('useHydrateAtoms should respect onMount', async () => { const onMountFn = jest.fn() countAtom.onMount = onMountFn - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue] = useAtom(countAtom) @@ -215,7 +217,7 @@ it('useHydrateAtoms should let you hydrate an atom once per scope', async () => const scope = Symbol() const countAtom = atom(0) - const Counter: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]]) const [countValue, setCount] = useAtom(countAtom) @@ -226,7 +228,7 @@ it('useHydrateAtoms should let you hydrate an atom once per scope', async () => ) } - const Counter2: FC<{ initialCount: number }> = ({ initialCount }) => { + const Counter2 = ({ initialCount }: { initialCount: number }) => { useHydrateAtoms([[countAtom, initialCount]], scope) const [countValue, setCount] = useAtom(countAtom, scope) diff --git a/tests/utils/useUpdateAtom.test.tsx b/tests/utils/useUpdateAtom.test.tsx index f0bdc2d5b5..f0a148e740 100644 --- a/tests/utils/useUpdateAtom.test.tsx +++ b/tests/utils/useUpdateAtom.test.tsx @@ -7,12 +7,12 @@ import { getTestProvider } from '../testUtils' const Provider = getTestProvider() -const useRerenderCount = () => { - const rerenderCountRef = useRef(0) +const useCommitCount = () => { + const commitCountRef = useRef(1) useEffect(() => { - rerenderCountRef.current += 1 + commitCountRef.current += 1 }) - return rerenderCountRef.current + return commitCountRef.current } it('useUpdateAtom does not trigger rerender in component', async () => { @@ -20,23 +20,23 @@ it('useUpdateAtom does not trigger rerender in component', async () => { const Displayer = () => { const [count] = useAtom(countAtom) - const rerenders = useRerenderCount() + const commits = useCommitCount() return (
- count: {count}, rerenders: {rerenders} + count: {count}, commits: {commits}
) } const Updater = () => { const setCount = useUpdateAtom(countAtom) - const rerenders = useRerenderCount() + const commits = useCommitCount() return ( <> -
updater rerenders: {rerenders}
+
updater commits: {commits}
) } @@ -59,23 +59,23 @@ it('useUpdateAtom does not trigger rerender in component', async () => { ) await waitFor(() => { - getByText('count: 0, rerenders: 0') - getByText('updater rerenders: 0') + getByText('count: 0, commits: 1') + getByText('updater commits: 1') }) fireEvent.click(getByText('increment')) await waitFor(() => { - getByText('count: 1, rerenders: 1') - getByText('updater rerenders: 0') + getByText('count: 1, commits: 2') + getByText('updater commits: 1') }) fireEvent.click(getByText('increment')) await waitFor(() => { - getByText('count: 2, rerenders: 2') - getByText('updater rerenders: 0') + getByText('count: 2, commits: 3') + getByText('updater commits: 1') }) fireEvent.click(getByText('increment')) await waitFor(() => { - getByText('count: 3, rerenders: 3') - getByText('updater rerenders: 0') + getByText('count: 3, commits: 4') + getByText('updater commits: 1') }) })