test: simplify a flaky test

TanStack · Mar 9, 2024 · 9c07aae · 9c07aae
1 parent 9cb77a7
commit 9c07aae
Showing 1 changed file with 34 additions and 58 deletions.
diff --git a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx
@@ -885,7 +885,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
+
+    let multiplier = 1
 
     function Page() {
       const [firstPage, setFirstPage] = React.useState(0)
@@ -894,75 +895,50 @@ describe('useInfiniteQuery', () => {
         queryKey: key,
         queryFn: async ({ pageParam }) => {
           await sleep(10)
-          return Number(pageParam)
+          return Number(multiplier * pageParam)
         },
         getNextPageParam: (lastPage) => lastPage + 1,
         initialPageParam: firstPage,
-        notifyOnChangeProps: 'all',
       })
 
-      states.push(state)
+      return (
+        <div>
+          <button
+            onClick={() => {
+              queryClient.setQueryData(key, {
+                pages: [7, 8],
+                pageParams: [7, 8],
+              })
+              setFirstPage(7)
+            }}
+          >
+            setPages
+          </button>
+          <button onClick={() => state.refetch()}>refetch</button>
+          <div>data: {JSON.stringify(state.data)}</div>
+        </div>
+      )
+    }
 
-      const { refetch } = state
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          queryClient.setQueryData(key, { pages: [7, 8], pageParams: [7, 8] })
-          setFirstPage(7)
-        }, 20)
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[0],"pageParams":[0]}'),
+    )
 
-        setActTimeout(() => {
-          refetch()
-        }, 50)
-      }, [refetch])
+    fireEvent.click(rendered.getByRole('button', { name: /setPages/i }))
 
-      return null
-    }
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'),
+    )
 
-    renderWithClient(queryClient, <Page />)
+    multiplier = 2
 
-    await sleep(100)
+    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
 
-    expect(states.length).toBe(5)
-    expect(states[0]).toMatchObject({
-      hasNextPage: false,
-      data: undefined,
-      isFetching: true,
-      isFetchingNextPage: false,
-      isSuccess: false,
-    })
-    // After first fetch
-    expect(states[1]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [0] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    // Set state
-    expect(states[2]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [7, 8] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    // Refetch
-    expect(states[3]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [7, 8] },
-      isFetching: true,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    // Refetch done
-    expect(states[4]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [7, 8] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'),
+    )
   })
 
   it('should only refetch the first page when initialData is provided', async () => {