painful progress

src/__tests__/renderHookToSnapshotStream.test.tsx

@@ -6,6 +6,9 @@ import {renderHookToSnapshotStream} from '@testing-library/react-render-stream'
 import * as React from 'react'
 import {withDisabledActWarnings} from '../__testHelpers__/withDisabledActWarnings.js'
 
+// @ts-expect-error this is not defined anywhere
+globalThis.IS_REACT_ACT_ENVIRONMENT = false
+
 const testEvents = new EventEmitter<{
   rerenderWithValue: [unknown]
 }>()
@@ -33,13 +36,13 @@ 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')
   }
+  testEvents.emit('rerenderWithValue', 'value')
+  await Promise.resolve()
+  testEvents.emit('rerenderWithValue', 'value2')
   {
     const snapshot = await takeSnapshot()
     expect(snapshot).toBe('value')
@@ -62,12 +65,12 @@ test.each<[type: string, initialValue: unknown, ...nextValues: unknown[]]>([
   const {takeSnapshot} = renderHookToSnapshotStream(useRerenderEvents, {
     initialProps: initialValue,
   })
+  expect(await takeSnapshot()).toBe(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/__tests__/renderToRenderStream.test.tsx

@@ -3,6 +3,10 @@ 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'
+
+// @ts-expect-error this is not defined anywhere
+globalThis.IS_REACT_ACT_ENVIRONMENT = false
+
 function CounterForm({
   value,
   onIncrement,
@@ -39,14 +43,14 @@ describe('snapshotDOM', () => {
       },
     )
     const utils = await renderResultPromise
-    const incrementButton = utils.getByText('Increment')
-    await userEvent.click(incrementButton)
-    await userEvent.click(incrementButton)
     {
       const {withinDOM} = await takeRender()
       const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
       expect(input.value).toBe('0')
     }
+    const incrementButton = utils.getByText('Increment')
+    await userEvent.click(incrementButton)
+    await userEvent.click(incrementButton)
     {
       const {withinDOM} = await takeRender()
       const input = withinDOM().getByLabelText<HTMLInputElement>('Value')

src/index.ts

@@ -1,2 +1,8 @@
 import '@testing-library/react-render-stream/expect'
+import {cleanup} from '@testing-library/react-render-stream/pure'
 export * from '@testing-library/react-render-stream/pure'
+
+const global = globalThis as {afterEach?: (fn: () => void) => void}
+if (global.afterEach) {
+  global.afterEach(cleanup)
+}

src/pure.ts

@@ -19,4 +19,4 @@ export type {SnapshotStream} from './renderHookToSnapshotStream.js'
 
 export type {Assertable} from './assertable.js'
 
-export {renderWithoutAct} from './renderStream/renderWithoutAct.js'
+export {renderWithoutAct, cleanup} from './renderStream/renderWithoutAct.js'

src/renderStream/__tests__/createRenderStream.test.tsx

@@ -1,11 +1,22 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import {jest, describe, test, expect} from '@jest/globals'
 import {createRenderStream} from '@testing-library/react-render-stream'
-import {userEvent} from '@testing-library/user-event'
+//import {userEvent} from '@testing-library/user-event'
 import * as React from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
 import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js'
 
+// @ts-expect-error this is not defined anywhere
+globalThis.IS_REACT_ACT_ENVIRONMENT = false
+
+async function click(element: HTMLElement) {
+  const opts = {bubbles: true, cancelable: true, buttons: 1}
+  element.dispatchEvent(new Event('mousedown', opts))
+  await new Promise(r => setTimeout(r, 50))
+  element.dispatchEvent(new Event('mouseup', opts))
+  element.dispatchEvent(new Event('click', opts))
+}
+
 function CounterForm({
   value,
   onIncrement,
@@ -39,14 +50,14 @@ describe('snapshotDOM', () => {
       snapshotDOM: true,
     })
     const utils = render(<Counter />)
-    const incrementButton = utils.getByText('Increment')
-    await userEvent.click(incrementButton)
-    await userEvent.click(incrementButton)
     {
       const {withinDOM} = await takeRender()
       const input = withinDOM().getByLabelText<HTMLInputElement>('Value')
       expect(input.value).toBe('0')
     }
+    const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
+    await click(incrementButton)
+    await click(incrementButton)
     {
       const {withinDOM} = await takeRender()
       // a one-off to test that `queryBy` works and accepts a type argument
@@ -76,7 +87,7 @@ describe('snapshotDOM', () => {
       const {withinDOM} = await takeRender()
       const snapshotIncrementButton = withinDOM().getByText('Increment')
       try {
-        await userEvent.click(snapshotIncrementButton)
+        await click(snapshotIncrementButton)
       } catch (error) {
         expect(error).toMatchInlineSnapshot(`
 [Error: Uncaught [Error: 
@@ -130,13 +141,13 @@ describe('replaceSnapshot', () => {
       value: number
     }>()
     const utils = render(<Counter />)
-    const incrementButton = utils.getByText('Increment')
-    await userEvent.click(incrementButton)
-    await userEvent.click(incrementButton)
     {
       const {snapshot} = await takeRender()
       expect(snapshot).toEqual({value: 0})
     }
+    const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
+    await click(incrementButton)
+    await click(incrementButton)
     {
       const {snapshot} = await takeRender()
       expect(snapshot).toEqual({value: 1})
@@ -160,13 +171,14 @@ describe('replaceSnapshot', () => {
         initialSnapshot: {unrelatedValue: 'unrelated', value: -1},
       })
       const utils = render(<Counter />)
-      const incrementButton = utils.getByText('Increment')
-      await userEvent.click(incrementButton)
-      await userEvent.click(incrementButton)
       {
         const {snapshot} = await takeRender()
         expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 0})
       }
+
+      const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
+      await click(incrementButton)
+      await click(incrementButton)
       {
         const {snapshot} = await takeRender()
         expect(snapshot).toEqual({unrelatedValue: 'unrelated', value: 1})
@@ -203,6 +215,8 @@ describe('replaceSnapshot', () => {
           <Counter />
         </ErrorBoundary>,
       )
+      await new Promise(r => setTimeout(r, 10))
+
       spy.mockRestore()
 
       expect(caughtError!).toMatchInlineSnapshot(
@@ -231,10 +245,11 @@ describe('onRender', () => {
       },
     })
     const utils = render(<Counter />)
-    const incrementButton = utils.getByText('Increment')
-    await userEvent.click(incrementButton)
-    await userEvent.click(incrementButton)
     await takeRender()
+
+    const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
+    await click(incrementButton)
+    await click(incrementButton)
     await takeRender()
     await takeRender()
   })
@@ -254,10 +269,10 @@ describe('onRender', () => {
     })
 
     const utils = render(<Counter />)
-    const incrementButton = utils.getByText('Increment')
-    await userEvent.click(incrementButton)
-    await userEvent.click(incrementButton)
     await takeRender()
+    const incrementButton = utils.getByText('Increment') as HTMLElement // TODO
+    await click(incrementButton)
+    await click(incrementButton)
     const error = await getExpectErrorMessage(takeRender())
 
     expect(error).toMatchInlineSnapshot(`

src/renderStream/renderWithoutAct.tsx

@@ -32,6 +32,8 @@ function renderRoot(
     root: ReturnType<typeof createConcurrentRoot>
   },
 ): RenderResult<Queries, any, any> {
+  // @ts-expect-error this is not defined anywhere
+  globalThis.IS_REACT_ACT_ENVIRONMENT = false
   root.render(
     WrapperComponent ? React.createElement(WrapperComponent, null, ui) : ui,
   )
@@ -150,3 +152,15 @@ function createConcurrentRoot(container: ReactDOMClient.Container) {
     },
   }
 }
+
+export function cleanup() {
+  mountedRootEntries.forEach(({root, container}) => {
+    root.unmount()
+
+    if (container.parentNode === document.body) {
+      document.body.removeChild(container)
+    }
+  })
+  mountedRootEntries.length = 0
+  mountedContainers.clear()
+}