more tweaking

Author: phryneas

src/__tests__/renderHookToSnapshotStream.test.tsx

@@ -4,10 +4,6 @@ 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'
-
-// @ts-expect-error this is not defined anywhere
-globalThis.IS_REACT_ACT_ENVIRONMENT = false
 
 const testEvents = new EventEmitter<{
   rerenderWithValue: [unknown]
@@ -19,7 +15,7 @@ function useRerenderEvents(initialValue: unknown) {
     onChange => {
       const cb = (value: unknown) => {
         lastValueRef.current = value
-        withDisabledActWarnings(onChange)
+        onChange()
       }
       testEvents.addListener('rerenderWithValue', cb)
       return () => {

src/__tests__/renderToRenderStream.test.tsx

@@ -7,9 +7,6 @@ import {
 import {userEvent as baseUserEvent} from '@testing-library/user-event'
 import * as React from 'react'
 
-// @ts-expect-error this is not defined anywhere
-globalThis.IS_REACT_ACT_ENVIRONMENT = false
-
 const userEvent = userEventWithoutAct(baseUserEvent)
 
 function CounterForm({

src/disableActEnvironment.ts

@@ -0,0 +1,22 @@
+const dispose: typeof Symbol.dispose =
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  Symbol.dispose ?? Symbol.for('nodejs.dispose')
+
+/**
+ * Temporarily disable act warnings.
+ *
+ * https://github.com/reactwg/react-18/discussions/102
+ */
+export function disableActEnvironment(): {cleanup: () => void} & Disposable {
+  const anyThis = globalThis as any as {IS_REACT_ACT_ENVIRONMENT?: boolean}
+  const prevActEnv = anyThis.IS_REACT_ACT_ENVIRONMENT
+  anyThis.IS_REACT_ACT_ENVIRONMENT = false
+
+  function cleanup() {
+    anyThis.IS_REACT_ACT_ENVIRONMENT = prevActEnv
+  }
+  return {
+    cleanup,
+    [dispose]: cleanup,
+  }
+}

src/expect/__tests__/renderStreamMatchers.test.tsx

@@ -7,7 +7,6 @@ import {
 } from '@testing-library/react-render-stream'
 import * as React from 'react'
 import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js'
-import {withDisabledActWarnings} from '../../__testHelpers__/withDisabledActWarnings.js'
 
 const testEvents = new EventEmitter<{
   rerender: []
@@ -16,7 +15,7 @@ const testEvents = new EventEmitter<{
 function useRerender() {
   const [, rerender] = React.useReducer(c => c + 1, 0)
   React.useEffect(() => {
-    const cb = () => void withDisabledActWarnings(rerender)
+    const cb = () => void rerender()
 
     testEvents.addListener('rerender', cb)
     return () => {

src/pure.ts

@@ -19,5 +19,7 @@ export type {SnapshotStream} from './renderHookToSnapshotStream.js'
 
 export type {Assertable} from './assertable.js'
 
-export {renderWithoutAct, cleanup} from './renderStream/renderWithoutAct.js'
+export {renderWithoutAct, cleanup} from './renderWithoutAct.js'
 export {userEventWithoutAct} from './useWithoutAct.js'
+export {disableActEnvironment} from './disableActEnvironment.js'
+export {withDisabledActEnvironment} from './withDisabledActEnvironment.js'

src/renderHookToSnapshotStream.tsx

@@ -1,4 +1,4 @@
-import {RenderHookOptions} from '@testing-library/react'
+import {type RenderHookOptions} from '@testing-library/react'
 import React from 'rehackt'
 import {createRenderStream} from './renderStream/createRenderStream.js'
 import {type NextRenderOptions} from './renderStream/createRenderStream.js'

src/renderStream/createRenderStream.tsx

@@ -2,12 +2,12 @@ import * as React from 'rehackt'
 
 import {RenderOptions} from '@testing-library/react'
 import {Assertable, markAssertable} from '../assertable.js'
+import {disableActEnvironment} from '../disableActEnvironment.js'
+import {renderWithoutAct, RenderWithoutActAsync} from '../renderWithoutAct.js'
 import {RenderInstance, type Render, type BaseRender} from './Render.js'
 import {type RenderStreamContextValue} from './context.js'
 import {RenderStreamContextProvider} from './context.js'
-import {disableActWarnings} from './disableActWarnings.js'
 import {syncQueries, type Queries, type SyncQueries} from './syncQueries.js'
-import {renderWithoutAct, RenderWithoutActAsync} from './renderWithoutAct.js'
 
 export type ValidSnapshot =
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
@@ -299,7 +299,7 @@ export function createRenderStream<
       // 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.
-      const disabledActWarnings = disableActWarnings()
+      const disabledAct = disableActEnvironment()
 
       let error: unknown
 
@@ -317,7 +317,7 @@ export function createRenderStream<
         if (!(error && error instanceof WaitForRenderTimeoutError)) {
           iteratorPosition++
         }
-        disabledActWarnings.cleanup()
+        disabledAct.cleanup()
       }
     }, stream),
     getCurrentRender() {

src/renderStream/disableActWarnings.ts

@@ -5,9 +5,10 @@ import {
   Queries,
   type RenderOptions,
   type RenderResult,
-} from '@testing-library/react'
+} from '@testing-library/react/pure.js'
 import React from 'react'
-import {SyncQueries} from './syncQueries.js'
+import {SyncQueries} from './renderStream/syncQueries.js'
+import {withDisabledActEnvironment} from './withDisabledActEnvironment.js'
 
 // Ideally we'd just use a WeakMap where containers are keys and roots are values.
 // We use two variables so that we can bail out in constant time when we render with a new container (most common use case)
@@ -32,8 +33,6 @@ 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,
   )
@@ -164,14 +163,16 @@ export function renderWithoutAct(
 }
 
 function createConcurrentRoot(container: ReactDOMClient.Container) {
-  const root = ReactDOMClient.createRoot(container)
+  const root = withDisabledActEnvironment(() =>
+    ReactDOMClient.createRoot(container),
+  )
 
   return {
     render(element: React.ReactNode) {
-      root.render(element)
+      withDisabledActEnvironment(() => root.render(element))
     },
     unmount() {
-      root.unmount()
+      withDisabledActEnvironment(() => root.unmount())
     },
   }
 }

src/renderStream/renderWithoutAct.tsx renamed to src/renderWithoutAct.tsx

@@ -1,7 +1,7 @@
-import {disableActWarnings} from '../renderStream/disableActWarnings.js'
+import {disableActEnvironment} from './disableActEnvironment.js'
 
-export function withDisabledActWarnings<T>(cb: () => T): T {
-  const disabledActWarnings = disableActWarnings()
+export function withDisabledActEnvironment<T>(cb: () => T): T {
+  const disabledActWarnings = disableActEnvironment()
   let result: T
   try {
     result = cb()