test: stabilize various tests (#4825)

zorzysty · web-flow · commit ff77512b6c99 · 2023-01-15T15:13:13.000+01:00
* test: stabilize various tests

* chore: bump istanbul version
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.14.2
+v16.19.0
diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
@@ -151,7 +151,7 @@ describe("useQuery's in Suspense mode", () => {
       useQuery(
         key,
         () => {
-          sleep(10)
+          sleep(50)
           return 'data'
         },
         { suspense: true },
@@ -1084,7 +1084,7 @@ describe('useQueries with suspense', () => {
             queryKey: key1,
             queryFn: async () => {
               results.push('1')
-              await sleep(10)
+              await sleep(50)
               return '1'
             },
             suspense: true,
@@ -1093,14 +1093,15 @@ describe('useQueries with suspense', () => {
             queryKey: key2,
             queryFn: async () => {
               results.push('2')
-              await sleep(20)
+              await sleep(200)
               return '2'
             },
             staleTime: 1000,
             suspense: false,
           },
         ],
       })
+
       return (
         <div>
           <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>
diff --git a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx
@@ -283,12 +283,15 @@ describe('useInfiniteQuery', () => {
         }),
       })
       states.push(state)
-      return null
+
+      return <div>{state.data?.pages.join(',')}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => {
+      rendered.getByText('count: 1')
+    })
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
@@ -317,12 +320,21 @@ describe('useInfiniteQuery', () => {
         }, []),
       })
       states.push(state)
-      return null
+
+      return (
+        <div>
+          {state.data?.pages.map((page) => (
+            <div key={page.id}>count: {page.count}</div>
+          ))}
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(20)
+    await waitFor(() => {
+      rendered.getByText('count: 1')
+    })
 
     expect(states.length).toBe(2)
     expect(selectCalled).toBe(1)
@@ -415,20 +427,29 @@ describe('useInfiniteQuery', () => {
 
       states.push(state)
 
-      const { fetchPreviousPage } = state
+      return (
+        <div>
+          <div>data: {state.data?.pages.join(',') ?? null}</div>
+          <button onClick={() => state.fetchPreviousPage()}>
+            fetch previous page
+          </button>
+        </div>
+      )
+    }
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          fetchPreviousPage()
-        }, 20)
-      }, [fetchPreviousPage])
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      return null
-    }
+    await waitFor(() => {
+      rendered.getByText('data: 10')
+    })
 
-    renderWithClient(queryClient, <Page />)
+    fireEvent.click(
+      rendered.getByRole('button', { name: /fetch previous page/i }),
+    )
 
-    await sleep(100)
+    await waitFor(() => {
+      rendered.getByText('data: 9,10')
+    })
 
     expect(states.length).toBe(4)
     expect(states[0]).toMatchObject({
diff --git a/packages/react-query/src/__tests__/useQueries.test.tsx b/packages/react-query/src/__tests__/useQueries.test.tsx
@@ -45,7 +45,7 @@ describe('useQueries', () => {
           {
             queryKey: key2,
             queryFn: async () => {
-              await sleep(100)
+              await sleep(200)
               return 2
             },
           },
@@ -1050,12 +1050,21 @@ describe('useQueries', () => {
           ],
         })
         results.push(result)
-        return null
+
+        return (
+          <div>
+            <div>data1: {result[0].data}</div>
+            <div>data2: {result[1].data}</div>
+          </div>
+        )
       }
 
-      renderWithClient(queryClient, <Page />, { context })
+      const rendered = renderWithClient(queryClient, <Page />, { context })
 
-      await sleep(30)
+      await waitFor(() => {
+        rendered.getByText('data1: 1')
+        rendered.getByText('data2: 2')
+      })
 
       expect(results[0]).toMatchObject([
         { data: undefined },
diff --git a/packages/svelte-query/package.json b/packages/svelte-query/package.json
@@ -26,15 +26,15 @@
     "@sveltejs/package": "^1.0.0",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "@testing-library/svelte": "^3.2.2",
-    "@vitest/coverage-istanbul": "^0.26.3",
+    "@vitest/coverage-istanbul": "^0.27.1",
     "eslint-plugin-svelte": "^2.14.1",
     "jsdom": "^20.0.3",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
     "tslib": "^2.4.1",
     "typescript": "^4.7.4",
     "vite": "^4.0.0",
-    "vitest": "^0.26.3"
+    "vitest": "^0.27.1"
   },
   "dependencies": {
     "@tanstack/query-core": "workspace:*"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
