undo renderToRenderStream changes

Author: phryneas

README.md

@@ -70,12 +70,16 @@ const utils = await render(<Component />, options)
 you can also call
 
 ```js
-const {takeRender, utils} = await renderToRenderStream(
-  <Component />,
-  combinedOptions,
-)
+const renderStream = renderToRenderStream(<Component />, combinedOptions)
+// if required
+const utils = await renderStream.renderResultPromise
 ```
 
+This might be shorter (especially in cases where you don't need to access
+`utils`), but keep in mind that the render is executed **asynchronously** after
+calling `renderToRenderStream`, and that you need to `await renderResultPromise`
+if you need access to `utils` as returned by `render`.
+
 ### `renderHookToSnapshotStream`
 
 Usage is very similar to RTL's `renderHook`, but you get a `snapshotStream`

src/__tests__/renderToRenderStream.test.tsx

@@ -3,7 +3,6 @@ import {describe, test, expect} from '@jest/globals'
 import {renderToRenderStream} from '@testing-library/react-render-stream'
 import {userEvent} from '@testing-library/user-event'
 import * as React from 'react'
-
 function CounterForm({
   value,
   onIncrement,
@@ -33,9 +32,13 @@ describe('snapshotDOM', () => {
       )
     }
 
-    const {takeRender, utils} = await renderToRenderStream(<Counter />, {
-      snapshotDOM: true,
-    })
+    const {takeRender, renderResultPromise} = renderToRenderStream(
+      <Counter />,
+      {
+        snapshotDOM: true,
+      },
+    )
+    const utils = await renderResultPromise
     const incrementButton = utils.getByText('Increment')
     await userEvent.click(incrementButton)
     await userEvent.click(incrementButton)
@@ -65,10 +68,14 @@ describe('snapshotDOM', () => {
         return null
       },
     }
-    const {takeRender, utils} = await renderToRenderStream(<Component />, {
-      queries,
-      snapshotDOM: true,
-    })
+    const {takeRender, renderResultPromise} = renderToRenderStream(
+      <Component />,
+      {
+        queries,
+        snapshotDOM: true,
+      },
+    )
+    const utils = await renderResultPromise
     expect(utils.foo()).toBe(null)
     const {withinDOM} = await takeRender()
     expect(withinDOM().foo()).toBe(null)

src/renderToRenderStream.ts

@@ -18,13 +18,13 @@ export interface RenderStreamWithRenderResult<
   Snapshot extends ValidSnapshot = void,
   Q extends Queries = SyncQueries,
 > extends RenderStream<Snapshot, Q> {
-  utils: AsyncRenderResult<Q>
+  renderResultPromise: Promise<AsyncRenderResult<Q>>
 }
 
 /**
  * Render into a container which is appended to document.body. It should be used with cleanup.
  */
-export async function renderToRenderStream<
+export function renderToRenderStream<
   Snapshot extends ValidSnapshot = void,
   Q extends Queries = SyncQueries,
 >(
@@ -37,20 +37,19 @@ export async function renderToRenderStream<
     queries,
     ...options
   }: RenderOptions<Snapshot, Q> = {},
-): Promise<RenderStreamWithRenderResult<Snapshot, Q>> {
+): RenderStreamWithRenderResult<Snapshot, Q> {
   const {render, ...stream} = createRenderStream<Snapshot, Q>({
     onRender,
     snapshotDOM,
     initialSnapshot,
     skipNonTrackingRenders,
     queries,
   })
-
-  // We need to wait a tick before calling `render` here, because the definition of `ui`
+  // `render` needs to be called asynchronously here, because the definition of `ui`
   // might contain components that reference the return value of `renderToRenderStream`
   // itself, e.g. `replaceSnapshot` or `mergeSnapshot`.
-  await Promise.resolve()
-  const utils = await render<Q>(ui, {...options, queries})
-
-  return {...stream, utils}
+  const renderResultPromise = Promise.resolve().then(() =>
+    render<Q>(ui, {...options, queries}),
+  )
+  return {...stream, renderResultPromise}
 }