add renderHookToSnapshotStream tests

Author: phryneas

src/__testHelpers__/withDisabledActWarnings.ts

@@ -0,0 +1,14 @@
+import {disableActWarnings} from '../renderStream/disableActWarnings.js'
+
+export function withDisabledActWarnings<T>(cb: () => T): T {
+  const disabledActWarnings = disableActWarnings()
+  let result: T
+  try {
+    result = cb()
+    return result instanceof Promise
+      ? (result.finally(disabledActWarnings.cleanup) as T)
+      : result
+  } finally {
+    disabledActWarnings.cleanup()
+  }
+}

src/__tests__/renderHookToSnapshotStream.test.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+import {EventEmitter} from 'node:events'
+import {test, expect} from '@jest/globals'
+import {renderHookToSnapshotStream} from '@testing-library/react-render-stream'
+import * as React from 'react'
+import {withDisabledActWarnings} from '../__testHelpers__/withDisabledActWarnings.js'
+
+const testEvents = new EventEmitter<{
+  rerenderWithValue: [unknown]
+}>()
+
+function useRerenderEvents(initialValue: unknown) {
+  const lastValueRef = React.useRef(initialValue)
+  return React.useSyncExternalStore(
+    onChange => {
+      const cb = (value: unknown) => {
+        lastValueRef.current = value
+        withDisabledActWarnings(onChange)
+      }
+      testEvents.addListener('rerenderWithValue', cb)
+      return () => {
+        testEvents.removeListener('rerenderWithValue', cb)
+      }
+    },
+    () => {
+      return lastValueRef.current
+    },
+  )
+}
+
+test('basic functionality', async () => {
+  const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, {
+    initialProps: 'initial',
+  })
+  testEvents.emit('rerenderWithValue', 'value')
+  await Promise.resolve()
+  testEvents.emit('rerenderWithValue', 'value2')
+  {
+    const snapshot = await takeSnapshot()
+    expect(snapshot).toBe('initial')
+  }
+  {
+    const snapshot = await takeSnapshot()
+    expect(snapshot).toBe('value')
+  }
+  {
+    const snapshot = await takeSnapshot()
+    expect(snapshot).toBe('value2')
+  }
+})
+
+test.each<[type: string, initialValue: unknown, ...nextValues: unknown[]]>([
+  ['string', 'initial', 'value', 'value2'],
+  ['number', 0, 1, 2],
+  ['functions', () => {}, () => {}, function named() {}],
+  ['objects', {a: 1}, {a: 2}, {foo: 'bar'}],
+  ['arrays', [1], [1, 2], [2]],
+  ['null/undefined', null, undefined, null],
+  ['undefined/null', undefined, null, undefined],
+])('works with %s', async (_, initialValue, ...nextValues) => {
+  const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, {
+    initialProps: initialValue,
+  })
+  for (const nextValue of nextValues) {
+    testEvents.emit('rerenderWithValue', nextValue)
+    // allow for a render to happen
+    await Promise.resolve()
+  }
+  expect(await takeSnapshot()).toBe(initialValue)
+  for (const nextValue of nextValues) {
+    expect(await takeSnapshot()).toBe(nextValue)
+  }
+})

src/jest/__tests__/renderStreamMatchers.test.tsx

@@ -1,14 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import {EventEmitter} from 'node:events'
 import {describe, test, expect} from '@jest/globals'
-import {createRenderStream} from '@testing-library/react-render-stream'
+import {
+  createRenderStream,
+  renderHookToSnapshotStream,
+} from '@testing-library/react-render-stream'
 import * as React from 'react'
 import {
   RenderStreamMatchers,
   toRenderExactlyTimes,
   toRerender,
 } from '../renderStreamMatchers.js'
 import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js'
+import {withDisabledActWarnings} from '../../__testHelpers__/withDisabledActWarnings.js'
 
 expect.extend({
   toRerender,
@@ -25,21 +29,20 @@ const testEvents = new EventEmitter<{
   rerender: []
 }>()
 
-function RerenderingComponent() {
+function useRerender() {
   const [, rerender] = React.useReducer(c => c + 1, 0)
   React.useEffect(() => {
-    function cb() {
-      const anyThis = globalThis as any as {IS_REACT_ACT_ENVIRONMENT?: boolean}
-      const prev = anyThis.IS_REACT_ACT_ENVIRONMENT
-      anyThis.IS_REACT_ACT_ENVIRONMENT = false
-      rerender()
-      anyThis.IS_REACT_ACT_ENVIRONMENT = prev
-    }
+    const cb = () => void withDisabledActWarnings(rerender)
+
     testEvents.addListener('rerender', cb)
     return () => {
       testEvents.removeListener('rerender', cb)
     }
   }, [])
+}
+
+function RerenderingComponent() {
+  useRerender()
   return null
 }
 
@@ -58,6 +61,46 @@ describe('toRerender', () => {
     await expect(takeRender).not.toRerender()
   })
 
+  test('works with renderStream object', async () => {
+    const renderStream = createRenderStream({})
+
+    renderStream.render(<RerenderingComponent />)
+    await expect(renderStream).toRerender()
+    await renderStream.takeRender()
+
+    testEvents.emit('rerender')
+    await expect(renderStream).toRerender()
+    await renderStream.takeRender()
+
+    await expect(renderStream).not.toRerender()
+  })
+
+  test('works with takeSnapshot function', async () => {
+    const {takeSnapshot} = renderHookToSnapshotStream(() => useRerender())
+
+    await expect(takeSnapshot).toRerender()
+    await takeSnapshot()
+
+    testEvents.emit('rerender')
+    await expect(takeSnapshot).toRerender()
+    await takeSnapshot()
+
+    await expect(takeSnapshot).not.toRerender()
+  })
+
+  test('works with snapshotStream', async () => {
+    const snapshotStream = renderHookToSnapshotStream(() => useRerender())
+
+    await expect(snapshotStream).toRerender()
+    await snapshotStream.takeSnapshot()
+
+    testEvents.emit('rerender')
+    await expect(snapshotStream).toRerender()
+    await snapshotStream.takeSnapshot()
+
+    await expect(snapshotStream).not.toRerender()
+  })
+
   test("errors when it rerenders, but shouldn't", async () => {
     const {takeRender, render} = createRenderStream({})
 
@@ -102,6 +145,29 @@ describe('toRenderExactlyTimes', () => {
     await expect(takeRender).toRenderExactlyTimes(2)
   })
 
+  test('works with renderStream object', async () => {
+    const renderStream = createRenderStream({})
+
+    renderStream.render(<RerenderingComponent />)
+    testEvents.emit('rerender')
+
+    await expect(renderStream).toRenderExactlyTimes(2)
+  })
+
+  test('works with takeSnapshot function', async () => {
+    const {takeSnapshot} = renderHookToSnapshotStream(() => useRerender())
+    testEvents.emit('rerender')
+
+    await expect(takeSnapshot).toRenderExactlyTimes(2)
+  })
+
+  test('works with snapshotStream', async () => {
+    const snapshotStream = renderHookToSnapshotStream(() => useRerender())
+    testEvents.emit('rerender')
+
+    await expect(snapshotStream).toRenderExactlyTimes(2)
+  })
+
   test('errors when the count of rerenders is wrong', async () => {
     const {takeRender, render} = createRenderStream({})
 

src/renderHookToSnapshotStream.tsx

@@ -1,8 +1,7 @@
 import {RenderHookOptions} from '@testing-library/react'
-import {createElement} from 'rehackt'
+import React from 'rehackt'
 import {createRenderStream} from './renderStream/createRenderStream.js'
 import {type NextRenderOptions} from './renderStream/createRenderStream.js'
-
 import {Render} from './renderStream/Render.js'
 import {Assertable, assertableSymbol, markAssertable} from './assertable.js'
 
@@ -46,24 +45,24 @@ export interface SnapshotStream<Snapshot, Props> extends Assertable {
   unmount: () => void
 }
 
-export function renderHookToSnapshotStream<ReturnValue, Props extends {}>(
+export function renderHookToSnapshotStream<ReturnValue, Props>(
   renderCallback: (props: Props) => ReturnValue,
   {initialProps, ...renderOptions}: RenderHookOptions<Props> = {},
 ): SnapshotStream<ReturnValue, Props> {
   const {render, ...stream} = createRenderStream<{value: ReturnValue}>()
 
-  const HookComponent: React.FC<Props> = props => {
-    stream.replaceSnapshot({value: renderCallback(props)})
+  const HookComponent: React.FC<{arg: Props}> = props => {
+    stream.replaceSnapshot({value: renderCallback(props.arg)})
     return null
   }
 
   const {rerender: baseRerender, unmount} = render(
-    createElement(HookComponent, initialProps),
+    <HookComponent arg={initialProps!} />,
     renderOptions,
   )
 
   function rerender(rerenderCallbackProps: Props) {
-    return baseRerender(createElement(HookComponent, rerenderCallbackProps))
+    return baseRerender(<HookComponent arg={rerenderCallbackProps} />)
   }
 
   return {

src/renderStream/createRenderStream.tsx

@@ -272,7 +272,7 @@ export function createRenderStream<Snapshot extends ValidSnapshot = void>({
       // In many cases we do not control the resolution of the suspended
       // promise which results in noisy tests when the profiler due to
       // repeated act warnings.
-      using _disabledActWarnings = disableActWarnings()
+      const disabledActWarnings = disableActWarnings()
 
       let error: unknown
 
@@ -290,6 +290,7 @@ export function createRenderStream<Snapshot extends ValidSnapshot = void>({
         if (!(error && error instanceof WaitForRenderTimeoutError)) {
           iteratorPosition++
         }
+        disabledActWarnings.cleanup()
       }
     }, stream),
     getCurrentRender() {

src/renderStream/disableActWarnings.ts

@@ -9,7 +9,7 @@ export function disableActWarnings() {
   anyThis.IS_REACT_ACT_ENVIRONMENT = false
 
   return {
-    [Symbol.dispose]() {
+    cleanup: () => {
       anyThis.IS_REACT_ACT_ENVIRONMENT = prevActEnv
     },
   }