Stabilize another batch of flaky tests

packages/query-core/src/tests/query.test.tsx

@@ -134,8 +134,8 @@ describe('query', () => {
     // There should not be a result yet
     expect(result).toBeUndefined()
 
-    // By now we should have a value
-    await sleep(50)
+    // Promise should eventually be resolved
+    await promise
     expect(result).toBe('data3')
   })
 
@@ -174,12 +174,15 @@ describe('query', () => {
     query.cancel()
 
     // Check if the error is set to the cancelled error
-    await sleep(0)
-    expect(isCancelledError(result)).toBe(true)
-
-    // Reset visibilityState to original value
-    visibilityMock.mockRestore()
-    window.dispatchEvent(new FocusEvent('focus'))
+    try {
+      await promise
+    } catch {
+      expect(isCancelledError(result)).toBe(true)
+    } finally {
+      // Reset visibilityState to original value
+      visibilityMock.mockRestore()
+      window.dispatchEvent(new FocusEvent('focus'))
+    }
   })
 
   test('should provide context to queryFn', async () => {

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

@@ -2,7 +2,6 @@ import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
 import {
-  Blink,
   createQueryClient,
   queryKey,
   renderWithClient,
@@ -1725,13 +1724,13 @@ describe('useInfiniteQuery', () => {
       const promise = new Promise<string>((resolve, reject) => {
         cancelFn = jest.fn(() => reject('Cancelled'))
         signal?.addEventListener('abort', cancelFn)
-        sleep(20).then(() => resolve('OK'))
+        sleep(1000).then(() => resolve('OK'))
       })
 
       return promise
     }
 
-    function Page() {
+    function Inner() {
       const state = useInfiniteQuery(key, queryFn)
       return (
         <div>
@@ -1740,14 +1739,25 @@ describe('useInfiniteQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(
-      queryClient,
-      <Blink duration={5}>
-        <Page />
-      </Blink>,
-    )
+    function Page() {
+      const [isVisible, setIsVisible] = React.useState(true)
+
+      return (
+        <>
+          <button onClick={() => setIsVisible(false)}>hide</button>
+          {isVisible && <Inner />}
+          <div>{isVisible ? 'visible' : 'hidden'}</div>
+        </>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('visible'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'hide' }))
 
-    await waitFor(() => rendered.getByText('off'))
+    await waitFor(() => rendered.getByText('hidden'))
 
     expect(cancelFn).toHaveBeenCalled()
   })

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

@@ -969,12 +969,15 @@ describe('useQuery', () => {
         select: (data) => data.name,
       })
       states.push(state)
-      return null
+
+      return <div>{state.data}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('test')
+    })
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })
@@ -992,12 +995,15 @@ describe('useQuery', () => {
         select: (data) => data.name,
       })
       states.push(state)
-      return null
+
+      return <div>{state.data}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('test')
+    })
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })