renderToRenderStream also should be async

Author: phryneas

src/__tests__/renderToRenderStream.test.tsx

@@ -33,13 +33,9 @@ describe('snapshotDOM', () => {
       )
     }
 
-    const {takeRender, renderResultPromise} = renderToRenderStream(
-      <Counter />,
-      {
-        snapshotDOM: true,
-      },
-    )
-    const utils = await renderResultPromise
+    const {takeRender, utils} = await renderToRenderStream(<Counter />, {
+      snapshotDOM: true,
+    })
     const incrementButton = utils.getByText('Increment')
     await userEvent.click(incrementButton)
     await userEvent.click(incrementButton)
@@ -69,14 +65,10 @@ describe('snapshotDOM', () => {
         return null
       },
     }
-    const {takeRender, renderResultPromise} = renderToRenderStream(
-      <Component />,
-      {
-        queries,
-        snapshotDOM: true,
-      },
-    )
-    const utils = await renderResultPromise
+    const {takeRender, utils} = await renderToRenderStream(<Component />, {
+      queries,
+      snapshotDOM: true,
+    })
     expect(utils.foo()).toBe(null)
     const {withinDOM} = await takeRender()
     expect(withinDOM().foo()).toBe(null)

src/disableActEnvironment.ts

@@ -56,10 +56,13 @@ export interface DisableActEnvironmentOptions {
  * test("my test", () => {
  *   const { cleanup } = disableActEnvironment();
  *
- *   // your test code here
- *
- *   cleanup();
+ *   try {
+ *     // your test code here
+ *   } finally {
+ *     cleanup();
+ *   }
  * })
+ * ```
  *
  * For more context on what `act` is and why you shouldn't use it in renderStream tests,
  * https://github.com/reactwg/react-18/discussions/102 is probably the best resource we have.

src/renderToRenderStream.ts

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