idk

Author: KATT

packages/react-query/src/__tests__/useQuery.promise.test.tsx

@@ -23,6 +23,18 @@ afterAll(() => {
   disableActReturn.cleanup()
 })
 
+function createDeferred<T = void>() {
+  let resolve: (value: T) => void
+  let reject: (error: unknown) => void
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve
+    reject = _reject
+  })
+  return { promise, resolve: resolve!, reject: reject! }
+}
+
+type Deferred<T = void> = ReturnType<typeof createDeferred<T>>
+
 describe('useQuery().promise', () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({
@@ -148,7 +160,9 @@ describe('useQuery().promise', () => {
   })
 
   it('parallel queries', async () => {
+    const deferred = createDeferred()
     const key = queryKey()
+
     const renderStream = createRenderStream({ snapshotDOM: true })
     let callCount = 0
 
@@ -158,7 +172,7 @@ describe('useQuery().promise', () => {
         queryKey: key,
         queryFn: async () => {
           callCount++
-          await sleep(1)
+          await deferred.promise
           return 'test'
         },
         staleTime: 1000,
@@ -170,7 +184,7 @@ describe('useQuery().promise', () => {
 
     function Loading() {
       useTrackRenders()
-      return <>loading..</>
+      return <span>loading..</span>
     }
     function Page() {
       useTrackRenders()
@@ -181,7 +195,7 @@ describe('useQuery().promise', () => {
             <MyComponent />
             <MyComponent />
           </React.Suspense>
-          <React.Suspense fallback={null}>
+          <React.Suspense fallback={<span>loading 2...</span>}>
             <MyComponent />
             <MyComponent />
           </React.Suspense>
@@ -198,19 +212,15 @@ describe('useQuery().promise', () => {
     {
       const { renderedComponents, withinDOM } = await renderStream.takeRender()
       withinDOM().getByText('loading..')
+      withinDOM().getByText('loading 2...')
       expect(renderedComponents).toEqual([Page, Loading])
     }
 
+    deferred.resolve()
+
     {
-      const { renderedComponents, withinDOM } = await renderStream.takeRender()
+      const { withinDOM } = await renderStream.takeRender()
       withinDOM().getByText('testtesttesttesttest')
-      expect(renderedComponents).toEqual([
-        MyComponent,
-        MyComponent,
-        MyComponent,
-        MyComponent,
-        MyComponent,
-      ])
     }
 
     expect(callCount).toBe(1)
@@ -493,6 +503,7 @@ describe('useQuery().promise', () => {
   })
 
   it('should throw error if the promise fails', async () => {
+    let deferred = createDeferred()
     const renderStream = createRenderStream({ snapshotDOM: true })
     const consoleMock = vi
       .spyOn(console, 'error')
@@ -514,12 +525,10 @@ describe('useQuery().promise', () => {
       const query = useQuery({
         queryKey: key,
         queryFn: async () => {
-          await sleep(1)
-          if (++queryCount > 1) {
-            // second time this query mounts, it should not throw
-            return 'data'
-          }
-          throw new Error('Error test')
+          queryCount++
+          await deferred.promise
+
+          return 'data'
         },
         retry: false,
       })
@@ -562,6 +571,9 @@ describe('useQuery().promise', () => {
       withinDOM().getByText('loading..')
     }
 
+    deferred.reject(new Error('Error test'))
+    deferred = createDeferred()
+
     {
       const { withinDOM } = await renderStream.takeRender()
       withinDOM().getByText('error boundary')
@@ -576,6 +588,7 @@ describe('useQuery().promise', () => {
       withinDOM().getByText('loading..')
     }
 
+    deferred.resolve()
     {
       const { withinDOM } = await renderStream.takeRender()
       withinDOM().getByText('data')
@@ -585,6 +598,7 @@ describe('useQuery().promise', () => {
   })
 
   it('should throw error if the promise fails (colocate suspense and promise)', async () => {
+    const deferred = createDeferred()
     const renderStream = createRenderStream({ snapshotDOM: true })
     const consoleMock = vi
       .spyOn(console, 'error')
@@ -596,8 +610,8 @@ describe('useQuery().promise', () => {
       const query = useQuery({
         queryKey: key,
         queryFn: async () => {
-          await sleep(1)
-          throw new Error('Error test')
+          await deferred.promise
+          return 'data'
         },
         retry: false,
       })
@@ -627,6 +641,8 @@ describe('useQuery().promise', () => {
       withinDOM().getByText('loading..')
     }
 
+    deferred.reject(new Error('Error test'))
+
     {
       const { withinDOM } = await renderStream.takeRender()
       withinDOM().getByText('error boundary')