test(react-query/usePrefetchQuery): remove 'vi.waitFor' and add 'advanceTimersByTimeAsync' (#9355)

Co-authored-by: Jonghyeon Ko <[email protected]>

Author: sukvvon

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

@@ -1,8 +1,8 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import React from 'react'
-import { fireEvent } from '@testing-library/react'
+import { act, fireEvent } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { queryKey } from '@tanstack/query-test-utils'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
 import {
   QueryCache,
   QueryClient,
@@ -18,7 +18,7 @@ const generateQueryFn = (data: string) =>
   vi
     .fn<(...args: Array<any>) => Promise<string>>()
     .mockImplementation(async () => {
-      await vi.advanceTimersByTimeAsync(10)
+      await sleep(10)
 
       return data
     })
@@ -72,7 +72,8 @@ describe('usePrefetchQuery', () => {
 
     const rendered = renderWithClient(queryClient, <App />)
 
-    await vi.waitFor(() => rendered.getByText('data: prefetchQuery'))
+    await act(() => vi.advanceTimersByTimeAsync(11))
+    rendered.getByText('data: prefetchQuery')
     expect(queryOpts.queryFn).toHaveBeenCalledTimes(1)
   })
 
@@ -92,14 +93,13 @@ describe('usePrefetchQuery', () => {
       )
     }
 
-    await queryClient.fetchQuery(queryOpts)
+    queryClient.fetchQuery(queryOpts)
+    await vi.advanceTimersByTimeAsync(10)
     queryOpts.queryFn.mockClear()
     const rendered = renderWithClient(queryClient, <App />)
 
     expect(rendered.queryByText('fetching: true')).not.toBeInTheDocument()
-    await vi.waitFor(() =>
-      rendered.getByText('data: The usePrefetchQuery hook is smart!'),
-    )
+    rendered.getByText('data: The usePrefetchQuery hook is smart!')
     expect(queryOpts.queryFn).not.toHaveBeenCalled()
   })
 
@@ -114,7 +114,7 @@ describe('usePrefetchQuery', () => {
     }
 
     queryFn.mockImplementationOnce(async () => {
-      await vi.advanceTimersByTimeAsync(10)
+      await sleep(10)
 
       throw new Error('Oops! Server error!')
     })
@@ -131,11 +131,12 @@ describe('usePrefetchQuery', () => {
       )
     }
 
-    await queryClient.prefetchQuery(queryOpts)
+    queryClient.prefetchQuery(queryOpts)
+    await vi.advanceTimersByTimeAsync(10)
     queryFn.mockClear()
     const rendered = renderWithClient(queryClient, <App />)
 
-    await vi.waitFor(() => rendered.getByText('Oops!'))
+    rendered.getByText('Oops!')
     expect(rendered.queryByText('data: Not an error')).not.toBeInTheDocument()
     expect(queryOpts.queryFn).not.toHaveBeenCalled()
 
@@ -166,7 +167,8 @@ describe('usePrefetchQuery', () => {
     }
 
     const rendered = renderWithClient(queryClient, <App />)
-    await vi.waitFor(() => rendered.getByText('data: prefetchedQuery'))
+    await act(() => vi.advanceTimersByTimeAsync(11))
+    rendered.getByText('data: prefetchedQuery')
     expect(queryOpts.queryFn).toHaveBeenCalledTimes(1)
   })
 
@@ -181,7 +183,7 @@ describe('usePrefetchQuery', () => {
     }
 
     queryFn.mockImplementationOnce(async () => {
-      await vi.advanceTimersByTimeAsync(10)
+      await sleep(10)
 
       throw new Error('Oops! Server error!')
     })
@@ -207,16 +209,16 @@ describe('usePrefetchQuery', () => {
       )
     }
 
-    await queryClient.prefetchQuery(queryOpts)
+    queryClient.prefetchQuery(queryOpts)
+    await vi.advanceTimersByTimeAsync(10)
     queryFn.mockClear()
 
     const rendered = renderWithClient(queryClient, <App />)
 
-    await vi.waitFor(() => rendered.getByText('Oops!'))
+    rendered.getByText('Oops!')
     fireEvent.click(rendered.getByText('Try again'))
-    await vi.waitFor(() =>
-      rendered.getByText('data: This is fine :dog: :fire:'),
-    )
+    await act(() => vi.advanceTimersByTimeAsync(11))
+    rendered.getByText('data: This is fine :dog: :fire:')
     expect(queryOpts.queryFn).toHaveBeenCalledTimes(1)
     consoleMock.mockRestore()
   })
@@ -265,14 +267,11 @@ describe('usePrefetchQuery', () => {
     expect(
       queryClient.getQueryState(thirdQueryOpts.queryKey)?.fetchStatus,
     ).toBe('fetching')
-    await vi.waitFor(() => rendered.getByText('Loading...'))
-    await vi.waitFor(() => rendered.getByText('data: Prefetch is nice!'))
-    await vi.waitFor(() =>
-      rendered.getByText('data: Prefetch is really nice!!'),
-    )
-    await vi.waitFor(() =>
-      rendered.getByText('data: Prefetch does not create waterfalls!!'),
-    )
+    rendered.getByText('Loading...')
+    await act(() => vi.advanceTimersByTimeAsync(11))
+    rendered.getByText('data: Prefetch is nice!')
+    rendered.getByText('data: Prefetch is really nice!!')
+    rendered.getByText('data: Prefetch does not create waterfalls!!')
     expect(Fallback).toHaveBeenCalledTimes(1)
     expect(firstQueryOpts.queryFn).toHaveBeenCalledTimes(1)
     expect(secondQueryOpts.queryFn).toHaveBeenCalledTimes(1)