test: add useQueries with suspense tests (#4502)

* test: add useQueries with suspense tests

shouldn't unmount before all promises fetched
should suspend all queries in parallel - global configuration

* fix should suspend all queries in parallel - global configuration - remove query suspense option

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: dante01yoon

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

@@ -1,8 +1,6 @@
 import { fireEvent, waitFor } from '@testing-library/react'
-import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
-
-import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
+import { ErrorBoundary } from 'react-error-boundary'
 import type { UseInfiniteQueryResult, UseQueryResult } from '..'
 import {
   QueryCache,
@@ -12,6 +10,7 @@ import {
   useQuery,
   useQueryErrorResetBoundary,
 } from '..'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()
@@ -1061,6 +1060,7 @@ describe('useQueries with suspense', () => {
         <Page />
       </React.Suspense>,
     )
+
     await waitFor(() => rendered.getByText('loading'))
     await waitFor(() => rendered.getByText('data: 1,2'))
 
@@ -1121,4 +1121,118 @@ describe('useQueries with suspense', () => {
 
     expect(results).toEqual(['1', '2', 'loading'])
   })
+
+  it("shouldn't unmount before all promises fetched", async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: string[] = []
+    const refs: number[] = []
+
+    function Fallback() {
+      results.push('loading')
+      return <div>loading</div>
+    }
+
+    function Page() {
+      const ref = React.useRef(Math.random())
+      const result = useQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: async () => {
+              refs.push(ref.current)
+              results.push('1')
+              await sleep(10)
+              return '1'
+            },
+            suspense: true,
+          },
+          {
+            queryKey: key2,
+            queryFn: async () => {
+              refs.push(ref.current)
+              results.push('2')
+              await sleep(20)
+              return '2'
+            },
+            suspense: true,
+          },
+        ],
+      })
+      return (
+        <div>
+          <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={<Fallback />}>
+        <Page />
+      </React.Suspense>,
+    )
+    await waitFor(() => rendered.getByText('loading'))
+    expect(refs.length).toBe(2)
+    await waitFor(() => rendered.getByText('data: 1,2'))
+    expect(refs[0]).toBe(refs[1])
+  })
+
+  it('should suspend all queries in parallel - global configuration', async () => {
+    const queryClientSuspenseMode = createQueryClient({
+      defaultOptions: {
+        queries: {
+          suspense: true,
+        },
+      },
+    })
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const results: string[] = []
+
+    function Fallback() {
+      results.push('loading')
+      return <div>loading</div>
+    }
+
+    function Page() {
+      const result = useQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: async () => {
+              results.push('1')
+              await sleep(10)
+              return '1'
+            },
+          },
+          {
+            queryKey: key2,
+            queryFn: async () => {
+              results.push('2')
+              await sleep(20)
+              return '2'
+            },
+          },
+        ],
+      })
+      return (
+        <div>
+          <h1>data: {result.map((it) => it.data ?? 'null').join(',')}</h1>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClientSuspenseMode,
+      <React.Suspense fallback={<Fallback />}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('data: 1,2'))
+
+    expect(results).toEqual(['1', '2', 'loading'])
+  })
 })