test(react-query/useIsFetching): remove 'vi.waitFor', add 'advanceTimersByTimeAsync' and replace 'findByText' with 'getByText' (#9358)

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

Author: sukvvon

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

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
-import { queryKey } from '@tanstack/query-test-utils'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
 import { QueryCache, QueryClient, useIsFetching, useQuery } from '..'
 import { renderWithClient, setActTimeout } from './utils'
 
@@ -31,7 +31,7 @@ describe('useIsFetching', () => {
       useQuery({
         queryKey: key,
         queryFn: async () => {
-          await vi.advanceTimersByTimeAsync(50)
+          await sleep(50)
           return 'test'
         },
         enabled: ready,
@@ -51,19 +51,15 @@ describe('useIsFetching', () => {
 
     const { getByText, getByRole } = renderWithClient(queryClient, <Page />)
 
-    await vi.waitFor(() => {
-      expect(getByText('isFetching: 0')).toBeInTheDocument()
-    })
+    expect(getByText('isFetching: 0')).toBeInTheDocument()
 
     fireEvent.click(getByRole('button', { name: /setReady/i }))
 
-    await vi.waitFor(() => {
-      expect(getByText('isFetching: 1')).toBeInTheDocument()
-    })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(getByText('isFetching: 1')).toBeInTheDocument()
 
-    await vi.waitFor(() => {
-      expect(getByText('isFetching: 0')).toBeInTheDocument()
-    })
+    await vi.advanceTimersByTimeAsync(51)
+    expect(getByText('isFetching: 0')).toBeInTheDocument()
   })
 
   it('should not update state while rendering', async () => {
@@ -85,7 +81,7 @@ describe('useIsFetching', () => {
       useQuery({
         queryKey: key1,
         queryFn: async () => {
-          await vi.advanceTimersByTimeAsync(100)
+          await sleep(100)
           return 'data'
         },
       })
@@ -96,7 +92,7 @@ describe('useIsFetching', () => {
       useQuery({
         queryKey: key2,
         queryFn: async () => {
-          await vi.advanceTimersByTimeAsync(100)
+          await sleep(100)
           return 'data'
         },
       })
@@ -123,9 +119,8 @@ describe('useIsFetching', () => {
 
     renderWithClient(queryClient, <Page />)
 
-    await vi.waitFor(() => {
-      expect(isFetchingArray).toEqual([0, 1, 1, 2, 1, 0])
-    })
+    await vi.advanceTimersByTimeAsync(151)
+    expect(isFetchingArray).toEqual([0, 1, 1, 2, 1, 0])
   })
 
   it('should be able to filter', async () => {
@@ -139,7 +134,7 @@ describe('useIsFetching', () => {
       useQuery({
         queryKey: key1,
         queryFn: async () => {
-          await vi.advanceTimersByTimeAsync(10)
+          await sleep(10)
           return 'test'
         },
       })
@@ -150,7 +145,7 @@ describe('useIsFetching', () => {
       useQuery({
         queryKey: key2,
         queryFn: async () => {
-          await vi.advanceTimersByTimeAsync(20)
+          await sleep(20)
           return 'test'
         },
       })
@@ -177,21 +172,17 @@ describe('useIsFetching', () => {
       )
     }
 
-    const { findByText, getByRole } = renderWithClient(queryClient, <Page />)
+    const { getByText, getByRole } = renderWithClient(queryClient, <Page />)
 
-    await vi.waitFor(() => {
-      findByText('isFetching: 0')
-    })
+    getByText('isFetching: 0')
 
     fireEvent.click(getByRole('button', { name: /setStarted/i }))
 
-    await vi.waitFor(() => {
-      findByText('isFetching: 1')
-    })
+    await vi.advanceTimersByTimeAsync(0)
+    getByText('isFetching: 1')
 
-    await vi.waitFor(() => {
-      findByText('isFetching: 0')
-    })
+    await vi.advanceTimersByTimeAsync(11)
+    getByText('isFetching: 0')
 
     // at no point should we have isFetching: 2
     expect(isFetchingArray).toEqual(expect.not.arrayContaining([2]))
@@ -205,7 +196,7 @@ describe('useIsFetching', () => {
       useQuery({
         queryKey: key,
         queryFn: async () => {
-          await vi.advanceTimersByTimeAsync(10)
+          await sleep(10)
           return 'test'
         },
       })
@@ -221,13 +212,11 @@ describe('useIsFetching', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await vi.waitFor(() => {
-      expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
-    })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
 
-    await vi.waitFor(() => {
-      expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
-    })
+    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
   })
 
   it('should use provided custom queryClient', async () => {
@@ -239,7 +228,7 @@ describe('useIsFetching', () => {
         {
           queryKey: key,
           queryFn: async () => {
-            await vi.advanceTimersByTimeAsync(10)
+            await sleep(10)
             return 'test'
           },
         },
@@ -257,8 +246,7 @@ describe('useIsFetching', () => {
 
     const rendered = render(<Page></Page>)
 
-    await vi.waitFor(() => {
-      expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
-    })
+    await vi.advanceTimersByTimeAsync(0)
+    expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
   })
 })