example usage of @testing-library/react-render-stream

packages/react-query/package.json

@@ -66,6 +66,7 @@
   "devDependencies": {
     "@tanstack/query-persist-client-core": "workspace:*",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/react-render-stream": "^2.0.0",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "@vitejs/plugin-react": "^4.3.3",

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

@@ -1,9 +1,10 @@
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import {
   QueryCache,
+  QueryClientProvider,
   QueryErrorResetBoundary,
   skipToken,
   useQueryErrorResetBoundary,
@@ -16,21 +17,31 @@ import type {
   UseSuspenseInfiniteQueryResult,
   UseSuspenseQueryResult,
 } from '..'
+import {
+  createRenderStream,
+  disableActEnvironment,
+  cleanup,
+} from '@testing-library/react-render-stream'
+
+// should probably end up in some setup file
+afterEach(cleanup)
 
 describe('useSuspenseQuery', () => {
   const queryCache = new QueryCache()
   const queryClient = createQueryClient({ queryCache })
 
   it('should render the correct amount of times in Suspense mode', async () => {
+    using _disabledAct = disableActEnvironment()
+
     const key = queryKey()
-    const states: Array<UseSuspenseQueryResult<number>> = []
+
+    const renderStream = createRenderStream<
+      UseSuspenseQueryResult<number> | undefined
+    >({ snapshotDOM: true })
 
     let count = 0
-    let renders = 0
 
     function Page() {
-      renders++
-
       const [stateKey, setStateKey] = React.useState(key)
 
       const state = useSuspenseQuery({
@@ -42,7 +53,7 @@ describe('useSuspenseQuery', () => {
         },
       })
 
-      states.push(state)
+      renderStream.replaceSnapshot(state)
 
       return (
         <div>
@@ -52,22 +63,48 @@ describe('useSuspenseQuery', () => {
       )
     }
 
-    const rendered = renderWithClient(
-      queryClient,
+    const rendered = await renderStream.render(
       <React.Suspense fallback="loading">
         <Page />
       </React.Suspense>,
+      {
+        wrapper: ({ children }) => (
+          <QueryClientProvider client={queryClient}>
+            {children}
+          </QueryClientProvider>
+        ),
+      },
     )
 
-    await waitFor(() => rendered.getByText('data: 1'))
+    {
+      const { snapshot, withinDOM } = await renderStream.takeRender()
+      // Page didn't render yet, so no call to `replaceSnapshot` yet
+      expect(snapshot).toBeUndefined() // I'd probably skip this assertion
+      withinDOM().getByText('loading')
+    }
+    {
+      const { snapshot, withinDOM } = await renderStream.takeRender()
+      expect(snapshot).toMatchObject({ data: 1, status: 'success' })
+      withinDOM().getByText('data: 1') // I'd probably skip this assertion
+    }
     fireEvent.click(rendered.getByLabelText('toggle'))
+    {
+      const { snapshot, withinDOM } = await renderStream.takeRender()
+      // Page is suspended so it doesn't replace the snapshot yet
+      expect(snapshot).toMatchObject({ data: 1, status: 'success' }) // I'd probably skip this assertion
+      withinDOM().getByText('loading')
+    }
+    {
+      const { snapshot, withinDOM } = await renderStream.takeRender()
+      expect(snapshot).toMatchObject({ data: 2, status: 'success' })
+      withinDOM().getByText('data: 2') // I'd probably skip this assertion
+    }
 
-    await waitFor(() => rendered.getByText('data: 2'))
-
-    expect(renders).toBe(4)
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ data: 1, status: 'success' })
-    expect(states[1]).toMatchObject({ data: 2, status: 'success' })
+    // this would require setup of this matcher, seems that automatically only works with jest
+    // expect(renderStream).not.toRerender()
+    await expect(renderStream.takeRender).rejects.toMatchObject({
+      message: expect.stringMatching(/Exceeded timeout/),
+    })
   })
 
   it('should return the correct states for a successful infinite query', async () => {