feat: support async act

package.json

@@ -69,16 +69,16 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.24.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.0",
     "bumpp": "^9.4.2",
     "changelogithub": "^0.13.9",
     "eslint": "^9.8.0",
     "playwright": "^1.46.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.2.4",
     "tsx": "^4.17.0",
     "typescript": "^5.5.4",

src/pure.ts

@@ -7,15 +7,15 @@ import ReactDOMClient from 'react-dom/client'
 // we call act only when rendering to flush any possible effects
 // usually the async nature of Vitest browser mode ensures consistency,
 // but rendering is sync and controlled by React directly
-function act(cb: () => unknown) {
+async function act(cb: () => unknown) {
   // @ts-expect-error unstable_act is not typed, but exported
   const _act = React.act || React.unstable_act
   if (typeof _act !== 'function') {
     cb()
   }
   else {
     (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
-    _act(cb)
+    await _act(cb)
     ;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = false
   }
 }
@@ -28,8 +28,8 @@ export interface RenderResult extends LocatorSelectors {
     maxLength?: number,
     options?: PrettyDOMOptions
   ) => void
-  unmount: () => void
-  rerender: (ui: React.ReactNode) => void
+  unmount: () => Promise<void>
+  rerender: (ui: React.ReactNode) => Promise<void>
   asFragment: () => DocumentFragment
 }
 
@@ -47,10 +47,10 @@ const mountedRootEntries: {
   root: ReturnType<typeof createConcurrentRoot>
 }[] = []
 
-export function render(
+export async function render(
   ui: React.ReactNode,
   { container, baseElement, wrapper: WrapperComponent }: ComponentRenderOptions = {},
-): RenderResult {
+): Promise<RenderResult> {
   if (!baseElement) {
     // default to document.body instead of documentElement to avoid output of potentially-large
     // head elements (such as JSS style blocks) in debug output
@@ -83,7 +83,7 @@ export function render(
     })
   }
 
-  act(() => {
+  await act(() => {
     root!.render(
       strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent)),
     )
@@ -93,13 +93,13 @@ export function render(
     container,
     baseElement,
     debug: (el, maxLength, options) => debug(el, maxLength, options),
-    unmount: () => {
-      act(() => {
+    unmount: async () => {
+      await act(() => {
         root.unmount()
       })
     },
-    rerender: (newUi: React.ReactNode) => {
-      act(() => {
+    rerender: async (newUi: React.ReactNode) => {
+      await act(() => {
         root.render(
           strictModeIfNeeded(wrapUiIfNeeded(newUi, WrapperComponent)),
         )
@@ -112,9 +112,9 @@ export function render(
   }
 }
 
-export function cleanup(): void {
-  mountedRootEntries.forEach(({ root, container }) => {
-    act(() => {
+export async function cleanup(): Promise<void> {
+  mountedRootEntries.forEach(async ({ root, container }) => {
+    await act(() => {
       root.unmount()
     })
     if (container.parentNode === document.body) {

test/fixtures/HelloWorld.tsx

@@ -1,3 +1,7 @@
-export function HelloWorld(): React.ReactElement {
-  return <div>Hello World</div>
+export function HelloWorld({
+  name = 'World',
+}: {
+  name?: string
+}): React.ReactElement {
+  return <div>{`Hello ${name}`}</div>
 }

test/fixtures/SuspendedHelloWorld.tsx

@@ -0,0 +1,19 @@
+import { use } from 'react'
+
+let fakeCacheLoaded = false
+const fakeCacheLoadPromise = new Promise<void>((resolve) => {
+  setTimeout(() => {
+    fakeCacheLoaded = true
+    resolve()
+  }, 100)
+})
+
+export function SuspendedHelloWorld({ name }: { name: string }): React.ReactElement {
+  if (!fakeCacheLoaded) {
+    use(fakeCacheLoadPromise)
+  }
+
+  return (
+    <div>{`Hello ${name}`}</div>
+  )
+}

test/render.test.tsx

@@ -1,19 +1,31 @@
+import { Suspense } from 'react'
 import { expect, test } from 'vitest'
 import { page } from '@vitest/browser/context'
 import { render } from '../src/index'
 import { HelloWorld } from './fixtures/HelloWorld'
 import { Counter } from './fixtures/Counter'
+import { SuspendedHelloWorld } from './fixtures/SuspendedHelloWorld'
 
 test('renders simple component', async () => {
-  const screen = render(<HelloWorld />)
+  const screen = await render(<HelloWorld />)
   await expect.element(page.getByText('Hello World')).toBeVisible()
   expect(screen.container).toMatchSnapshot()
 })
 
 test('renders counter', async () => {
-  const screen = render(<Counter initialCount={1} />)
+  const screen = await render(<Counter initialCount={1} />)
 
   await expect.element(screen.getByText('Count is 1')).toBeVisible()
   await screen.getByRole('button', { name: 'Increment' }).click()
   await expect.element(screen.getByText('Count is 2')).toBeVisible()
 })
+
+test('waits for suspended boundaries', async () => {
+  const { getByText } = await render(<SuspendedHelloWorld name="Vitest" />, {
+    wrapper: ({ children }) => (
+      <Suspense fallback={<div>Suspended!</div>}>{children}</Suspense>
+    ),
+  })
+  await expect.element(getByText('Suspended!')).toBeInTheDocument()
+  await expect.element(getByText('Hello Vitest')).toBeInTheDocument()
+})