feat!: support async act v2 (#22)

Co-authored-by: Matan Borenkraout <matanbobi@gmail.com>

Author: cloudkite

README.md

@@ -11,7 +11,7 @@ import { render } from 'vitest-browser-react'
 import { expect, test } from 'vitest'
 
 test('counter button increments the count', async () => {
-  const screen = render(<Component count={1} />)
+  const screen = await render(<Component count={1} />)
 
   await screen.getByRole('button', { name: 'Increment' }).click()
 
@@ -29,9 +29,9 @@ import { renderHook } from 'vitest-browser-react'
 import { expect, test } from 'vitest'
 
 test('should increment counter', async () => {
-  const { result, act } = renderHook(() => useCounter())
+  const { result, act } = await renderHook(() => useCounter())
 
-  act(() => {
+  await act(() => {
     result.current.increment()
   })
 
@@ -64,9 +64,9 @@ import 'vitest-browser-react'
 import { page } from '@vitest/browser/context'
 
 test('counter button increments the count', async () => {
-  const screen = page.render(<Component count={1} />)
+  const screen = await page.render(<Component count={1} />)
 
-  screen.cleanup()
+  await screen.cleanup()
 })
 ```
 

package.json

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

pnpm-lock.yaml

@@ -10,8 +10,8 @@ page.extend({
   [Symbol.for('vitest:component-cleanup')]: cleanup,
 })
 
-beforeEach(() => {
-  cleanup()
+beforeEach(async () => {
+  await cleanup()
 })
 
 declare module '@vitest/browser/context' {

src/index.ts

@@ -7,7 +7,7 @@ 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') {
@@ -16,7 +16,7 @@ function act(cb: () => unknown) {
   else {
     (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
     try {
-      _act(cb)
+      await _act(cb)
     }
     finally {
       ;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = false
@@ -32,8 +32,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
 }
 
@@ -51,10 +51,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
@@ -87,7 +87,7 @@ export function render(
     })
   }
 
-  act(() => {
+  await act(() => {
     root!.render(
       strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent)),
     )
@@ -97,13 +97,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)),
         )
@@ -128,7 +128,7 @@ export interface RenderHookResult<Result, Props> {
   /**
    * Triggers a re-render. The props will be passed to your renderHook callback.
    */
-  rerender: (props?: Props) => void
+  rerender: (props?: Props) => Promise<void>
   /**
    * This is a stable reference to the latest value returned by your renderHook
    * callback
@@ -143,14 +143,14 @@ export interface RenderHookResult<Result, Props> {
    * Unmounts the test component. This is useful for when you need to test
    * any cleanup your useEffects have.
    */
-  unmount: () => void
+  unmount: () => Promise<void>
   /**
    * A test helper to apply pending React updates before making assertions.
    */
-  act: (callback: () => unknown) => void
+  act: (callback: () => unknown) => Promise<void>
 }
 
-export function renderHook<Props, Result>(renderCallback: (initialProps?: Props) => Result, options: RenderHookOptions<Props> = {}): RenderHookResult<Result, Props> {
+export async function renderHook<Props, Result>(renderCallback: (initialProps?: Props) => Result, options: RenderHookOptions<Props> = {}): Promise<RenderHookResult<Result, Props>> {
   const { initialProps, ...renderOptions } = options
 
   const result = React.createRef<Result>() as unknown as { current: Result }
@@ -165,7 +165,7 @@ export function renderHook<Props, Result>(renderCallback: (initialProps?: Props)
     return null
   }
 
-  const { rerender: baseRerender, unmount } = render(
+  const { rerender: baseRerender, unmount } = await render(
     <TestComponent renderCallbackProps={initialProps} />,
     renderOptions,
   )
@@ -179,15 +179,15 @@ export function renderHook<Props, Result>(renderCallback: (initialProps?: Props)
   return { result, rerender, unmount, act }
 }
 
-export function cleanup(): void {
-  mountedRootEntries.forEach(({ root, container }) => {
-    act(() => {
+export async function cleanup(): Promise<void> {
+  for (const { root, container } of mountedRootEntries) {
+    await act(() => {
       root.unmount()
     })
     if (container.parentNode === document.body) {
       document.body.removeChild(container)
     }
-  })
+  }
   mountedRootEntries.length = 0
   mountedContainers.clear()
 }

src/pure.tsx

@@ -1,3 +1,3 @@
-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/HelloWorld.tsx

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

test/fixtures/SuspendedHelloWorld.tsx

@@ -4,18 +4,18 @@ import React from 'react'
 import { renderHook } from '../src/index'
 import { useCounter } from './fixtures/useCounter'
 
-test('should increment counter', () => {
-  const { result, act } = renderHook(() => useCounter())
+test('should increment counter', async () => {
+  const { result, act } = await renderHook(() => useCounter())
 
-  act(() => {
+  await act(() => {
     result.current.increment()
   })
 
   expect(result.current.count).toBe(1)
 })
 
-test('allows rerendering', () => {
-  const { result, rerender } = renderHook(
+test('allows rerendering', async () => {
+  const { result, rerender } = await renderHook(
     (initialProps) => {
       const [left, setLeft] = React.useState('left')
       const [right, setRight] = React.useState('right')
@@ -47,7 +47,7 @@ test('allows wrapper components', async () => {
   function Wrapper({ children }: PropsWithChildren) {
     return <Context.Provider value="provided">{children}</Context.Provider>
   }
-  const { result } = renderHook(
+  const { result } = await renderHook(
     () => {
       return React.useContext(Context)
     },

test/render-hook.test.tsx

@@ -1,18 +1,20 @@
 import { expect, test, vi } from 'vitest'
 import { page, userEvent } from '@vitest/browser/context'
 import { Button } from 'react-aria-components'
+import { Suspense } from 'react'
 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()
@@ -21,8 +23,25 @@ test('renders counter', async () => {
 
 test('should fire the onPress/onClick handler', async () => {
   const handler = vi.fn()
-  const screen = page.render(<Button onPress={handler}>Button</Button>)
+  const screen = await page.render(<Button onPress={handler}>Button</Button>)
   await userEvent.click(screen.getByRole('button'))
   // await screen.getByRole('button').click()
   expect(handler).toHaveBeenCalled()
 })
+
+test('waits for suspended boundaries', async ({ onTestFinished }) => {
+  vi.useFakeTimers()
+  onTestFinished(() => {
+    vi.useRealTimers()
+  })
+
+  const result = render(<SuspendedHelloWorld name="Vitest" />, {
+    wrapper: ({ children }) => (
+      <Suspense fallback={<div>Suspended!</div>}>{children}</Suspense>
+    ),
+  })
+  await expect.element(page.getByText('Suspended!')).toBeInTheDocument()
+  vi.runAllTimers()
+  await result
+  await expect.element(page.getByText('Hello Vitest')).toBeInTheDocument()
+})