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

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

Author: sukvvon

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

@@ -62,12 +62,12 @@ describe('useIsMutating', () => {
     // [ +0, 1, 2, 1, +0 ]
     // our batching strategy might yield different results
 
-    await vi.waitFor(() => expect(isMutatingArray[0]).toEqual(0))
-    await vi.waitFor(() => expect(isMutatingArray[1]).toEqual(1))
-    await vi.waitFor(() => expect(isMutatingArray[2]).toEqual(2))
-    await vi.waitFor(() =>
-      expect(isMutatingArray[isMutatingArray.length - 1]).toEqual(0),
-    )
+    await vi.advanceTimersByTimeAsync(40)
+    expect(isMutatingArray[0]).toEqual(0)
+    expect(isMutatingArray[1]).toEqual(1)
+    expect(isMutatingArray[2]).toEqual(2)
+    await vi.advanceTimersByTimeAsync(1)
+    expect(isMutatingArray[isMutatingArray.length - 1]).toEqual(0)
   })
 
   it('should filter correctly by mutationKey', async () => {
@@ -99,7 +99,8 @@ describe('useIsMutating', () => {
     }
 
     renderWithClient(queryClient, <Page />)
-    await vi.waitFor(() => expect(isMutatingArray).toEqual([0, 1, 0]))
+    await vi.advanceTimersByTimeAsync(101)
+    expect(isMutatingArray).toEqual([0, 1, 0])
   })
 
   it('should filter correctly by predicate', async () => {
@@ -134,7 +135,8 @@ describe('useIsMutating', () => {
     }
 
     renderWithClient(queryClient, <Page />)
-    await vi.waitFor(() => expect(isMutatingArray).toEqual([0, 1, 0]))
+    await vi.advanceTimersByTimeAsync(101)
+    expect(isMutatingArray).toEqual([0, 1, 0])
   })
 
   it('should use provided custom queryClient', async () => {
@@ -163,13 +165,20 @@ describe('useIsMutating', () => {
 
     const rendered = render(<Page></Page>)
 
-    await vi.waitFor(() =>
-      expect(rendered.getByText('mutating: 1')).toBeInTheDocument(),
-    )
+    await vi.advanceTimersByTimeAsync(0)
+    expect(rendered.getByText('mutating: 1')).toBeInTheDocument()
   })
 })
 
 describe('useMutationState', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   it('should return variables after calling mutate', async () => {
     const queryClient = new QueryClient()
     const variables: Array<Array<unknown>> = []
@@ -211,11 +220,12 @@ describe('useMutationState', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await vi.waitFor(() => rendered.getByText('data: null'))
+    rendered.getByText('data: null')
 
     fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
-    await vi.waitFor(() => rendered.getByText('data: data1'))
+    await vi.advanceTimersByTimeAsync(151)
+    rendered.getByText('data: data1')
 
     expect(variables).toEqual([[], [1], []])
   })