test(react-query/useIsFetching): remove unnecessary 'advanceTimersByTimeAsync', unify to 'rendered', and add detailed 'expect' for custom queryClient and state updates during rendering

Author: sukvvon

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

@@ -16,12 +16,12 @@ describe('useIsFetching', () => {
 
   // See https://github.com/tannerlinsley/react-query/issues/105
   it('should update as queries start and stop fetching', async () => {
-    const queryCache = new QueryCache()
-    const queryClient = new QueryClient({ queryCache })
+    const queryClient = new QueryClient()
     const key = queryKey()
 
     function IsFetching() {
       const isFetching = useIsFetching()
+
       return <div>isFetching: {isFetching}</div>
     }
 
@@ -46,20 +46,19 @@ describe('useIsFetching', () => {
       )
     }
 
-    const { getByText, getByRole } = renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    expect(getByText('isFetching: 0')).toBeInTheDocument()
+    expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
 
-    fireEvent.click(getByRole('button', { name: /setReady/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /setReady/i }))
     await vi.advanceTimersByTimeAsync(0)
-    expect(getByText('isFetching: 1')).toBeInTheDocument()
+    expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
     await vi.advanceTimersByTimeAsync(51)
-    expect(getByText('isFetching: 0')).toBeInTheDocument()
+    expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
   })
 
   it('should not update state while rendering', async () => {
-    const queryCache = new QueryCache()
-    const queryClient = new QueryClient({ queryCache })
+    const queryClient = new QueryClient()
 
     const key1 = queryKey()
     const key2 = queryKey()
@@ -68,23 +67,27 @@ describe('useIsFetching', () => {
 
     function IsFetching() {
       const isFetching = useIsFetching()
+
       isFetchingArray.push(isFetching)
-      return null
+
+      return <div>isFetching: {isFetching}</div>
     }
 
     function FirstQuery() {
       useQuery({
         queryKey: key1,
-        queryFn: () => sleep(100).then(() => 'data'),
+        queryFn: () => sleep(100).then(() => 'data1'),
       })
+
       return null
     }
 
     function SecondQuery() {
       useQuery({
         queryKey: key2,
-        queryFn: () => sleep(100).then(() => 'data'),
+        queryFn: () => sleep(100).then(() => 'data2'),
       })
+
       return null
     }
 
@@ -108,7 +111,18 @@ describe('useIsFetching', () => {
 
     renderWithClient(queryClient, <Page />)
 
-    await vi.advanceTimersByTimeAsync(151)
+    expect(isFetchingArray[0]).toEqual(0)
+    await vi.advanceTimersByTimeAsync(0)
+    expect(isFetchingArray[1]).toEqual(1)
+    await vi.advanceTimersByTimeAsync(50)
+    expect(isFetchingArray[2]).toEqual(1)
+    await vi.advanceTimersByTimeAsync(1)
+    expect(isFetchingArray[3]).toEqual(2)
+    await vi.advanceTimersByTimeAsync(50)
+    expect(isFetchingArray[4]).toEqual(1)
+    await vi.advanceTimersByTimeAsync(50)
+    expect(isFetchingArray[5]).toEqual(0)
+
     expect(isFetchingArray).toEqual([0, 1, 1, 2, 1, 0])
   })
 
@@ -122,16 +136,18 @@ describe('useIsFetching', () => {
     function One() {
       useQuery({
         queryKey: key1,
-        queryFn: () => sleep(10).then(() => 'test'),
+        queryFn: () => sleep(10).then(() => 'test1'),
       })
+
       return null
     }
 
     function Two() {
       useQuery({
         queryKey: key2,
-        queryFn: () => sleep(20).then(() => 'test'),
+        queryFn: () => sleep(20).then(() => 'test2'),
       })
+
       return null
     }
 
@@ -155,15 +171,15 @@ describe('useIsFetching', () => {
       )
     }
 
-    const { getByText, getByRole } = renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    expect(getByText('isFetching: 0')).toBeInTheDocument()
+    expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
 
-    fireEvent.click(getByRole('button', { name: /setStarted/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /setStarted/i }))
     await vi.advanceTimersByTimeAsync(0)
-    expect(getByText('isFetching: 1')).toBeInTheDocument()
+    expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
     await vi.advanceTimersByTimeAsync(11)
-    expect(getByText('isFetching: 0')).toBeInTheDocument()
+    expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
 
     // at no point should we have isFetching: 2
     expect(isFetchingArray).toEqual(expect.not.arrayContaining([2]))
@@ -190,14 +206,16 @@ describe('useIsFetching', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await vi.advanceTimersByTimeAsync(0)
     expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
     await vi.advanceTimersByTimeAsync(11)
     expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
   })
 
   it('should use provided custom queryClient', async () => {
-    const queryClient = new QueryClient()
+    const onSuccess = vi.fn()
+
+    const queryCache = new QueryCache({ onSuccess })
+    const queryClient = new QueryClient({ queryCache })
     const key = queryKey()
 
     function Page() {
@@ -218,9 +236,11 @@ describe('useIsFetching', () => {
       )
     }
 
-    const rendered = render(<Page></Page>)
+    const rendered = render(<Page />)
 
-    await vi.advanceTimersByTimeAsync(0)
     expect(rendered.getByText('isFetching: 1')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('isFetching: 0')).toBeInTheDocument()
+    expect(onSuccess).toHaveBeenCalledOnce()
   })
 })