#React

@rstest/browser-react renders React components and hooks in Browser Mode. For installation and project configuration, see the React guide.

Import these functions from @rstest/browser-react. For element queries and interactions, use the separate page API.

#render

• Type: (ui: ReactNode, options?: RenderOptions) => Promise<RenderResult>

Render a React element and wait for React to finish the update. render, rerender, and unmount already wrap their updates in act; await each call before asserting the result.

import { render } from '@rstest/browser-react';
import { expect, test } from '@rstest/core';

test('updates the greeting', async () => {
  const view = await render(<p>Hello, Alice</p>);
  expect(view.container.textContent).toBe('Hello, Alice');

  await view.rerender(<p>Hello, Bob</p>);
  expect(view.container.textContent).toBe('Hello, Bob');

  await view.unmount();
  expect(view.container.childElementCount).toBe(0);
});

#RenderOptions

All options are optional. RenderOptions is exported from @rstest/browser-react.

ReactNode and JSXElementConstructor are React types. The type of createRootOptions depends on hydrate: HydrationOptions for true, and RootOptions for false or an omitted value.

#RenderResult

RenderResult is exported from @rstest/browser-react.

#renderHook

• Type: <Props, Result>(renderCallback: (props?: Props) => Result, options?: RenderHookOptions<Props>) => Promise<RenderHookResult<Result, Props>>

Run a hook inside a test component. Read its latest committed return value through result.current, and wrap manual state updates in act.

import { act, renderHook } from '@rstest/browser-react';
import { expect, test } from '@rstest/core';
import { useState } from 'react';

test('updates hook state', async () => {
  const { result } = await renderHook(() => useState(0));

  await act(() => {
    result.current[1](1);
  });

  expect(result.current[0]).toBe(1);
});

#RenderHookOptions

RenderHookOptions<Props> accepts all RenderOptions, plus initialProps?: Props for the first call to renderCallback. These props are not passed to the wrapper component. The type is exported from @rstest/browser-react.

#RenderHookResult

RenderHookResult<Result, Props> is exported from @rstest/browser-react.

#act

• Type: (callback: () => unknown) => Promise<void>

Wrap actions that trigger React updates, such as calling a hook's state setter or a native element's .click(). Await the returned promise before checking the updated UI or hook value. The callback can be synchronous or asynchronous.

See the renderHook example above and the component testing example.

#cleanup

• Type: () => Promise<void>

Unmount all tracked React roots. Containers that are direct children of document.body are also removed. Containers mounted elsewhere remain in the DOM; remove those yourself if needed.

Importing @rstest/browser-react registers automatic cleanup in beforeEach. The previous test's DOM therefore remains available for inspection until the next test starts.

To control cleanup timing, import from @rstest/browser-react/pure, which exports the same functions and types without registering automatic cleanup. For example, clean up after each test:

import { cleanup } from '@rstest/browser-react/pure';
import { afterEach } from '@rstest/core';

afterEach(async () => {
  await cleanup();
});

Add this file to setupFiles, and import rendering helpers from @rstest/browser-react/pure in your tests as well.

#configure

• Type: (customConfig: Partial<RenderConfiguration>) => void

Set defaults used by subsequent renders. RenderConfiguration is exported from @rstest/browser-react and has one field:

• reactStrictMode: boolean: wrap the rendered UI in React StrictMode. Defaults to false.

For example, enable StrictMode in a setup file:

import { configure } from '@rstest/browser-react';

configure({ reactStrictMode: true });

cleanup() does not reset this configuration. If a test changes it temporarily, restore it explicitly afterward.