test: stabilize some useQuery and useInfiniteQuery tests (#4526)

* test: stabilize the test for overriding the cursor in the fetchNextPage callback

* test: stabilize the test for error when a selector throws

* style: apply formatting

* test: stabilize the test for variables in a query function

packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

@@ -1109,20 +1109,31 @@ describe('useInfiniteQuery', () => {
 
       states.push(state)
 
-      const { fetchNextPage } = state
+      return (
+        <div>
+          <div>page0: {state.data?.pages[0]}</div>
+          <div>page1: {state.data?.pages[1]}</div>
+          <button onClick={() => state.fetchNextPage({ pageParam: 5 })}>
+            Fetch next page
+          </button>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          fetchNextPage({ pageParam: 5 })
-        }, 20)
-      }, [fetchNextPage])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => {
+      rendered.getByText('page0: 0')
+    })
 
-    renderWithClient(queryClient, <Page />)
+    fireEvent.click(rendered.getByRole('button', { name: 'Fetch next page' }))
 
-    await sleep(100)
+    await waitFor(() => {
+      rendered.getByText('page1: 5')
+    })
+
+    // make sure no additional renders are happening after fetching next page
+    await sleep(20)
 
     expect(states.length).toBe(4)
     expect(states[0]).toMatchObject({

packages/react-query/src/__tests__/useQuery.test.tsx

@@ -1072,12 +1072,15 @@ describe('useQuery', () => {
         },
       })
       states.push(state)
-      return null
+
+      return <div>{state.status}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('error')
+    })
 
     expect(mockLogger.error).toHaveBeenCalledWith(error)
     expect(states.length).toBe(2)
@@ -2498,12 +2501,14 @@ describe('useQuery', () => {
     function Page() {
       const state = useQuery([key, variables], queryFn)
       states.push(state)
-      return null
+      return <div>{state.status}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(20)
+    await waitFor(() => {
+      rendered.getByText('success')
+    })
 
     expect(states[1]?.data).toEqual([key, variables])
   })