refactor(tests): adapt useInfiniteQuery test

copied over from the react-18 branch, because that impl is less flaky

Author: TkDodo

src/reactjs/tests/useInfiniteQuery.test.tsx

@@ -197,25 +197,28 @@ describe('useInfiniteQuery', () => {
 
       states.push(state)
 
-      const { fetchNextPage } = state
+      return (
+        <div>
+          <button onClick={() => state.fetchNextPage()}>fetchNextPage</button>
+          <button onClick={() => setOrder('asc')}>order</button>
+          <div>data: {state.data?.pages.join(',') ?? 'null'}</div>
+          <div>isFetching: {String(state.isFetching)}</div>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          fetchNextPage()
-        }, 50)
-        setActTimeout(() => {
-          setOrder('asc')
-        }, 100)
-      }, [fetchNextPage])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => rendered.getByText('data: 0-desc'))
+    rendered.getByRole('button', { name: /fetchNextPage/i }).click()
 
-    renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('data: 0-desc,1-desc'))
+    rendered.getByRole('button', { name: /order/i }).click()
 
-    await sleep(300)
+    await waitFor(() => rendered.getByText('data: 0-asc'))
+    await waitFor(() => rendered.getByText('isFetching: false'))
+    await waitFor(() => expect(states.length).toBe(7))
 
-    expect(states.length).toBe(7)
     expect(states[0]).toMatchObject({
       data: undefined,
       isFetching: true,