test-renderer

library1.2.0jsnpmunverified

test-renderer is a modern, lightweight testing utility for React, serving as a replacement for the deprecated `react-test-renderer` package. Currently stable at version 1.2.0, this library adheres to a rapid release cadence, with minor versions specifically tracking compatibility lines for new React minor releases (e.g., 1.2.x for React 19.2). It leverages React Reconciler to construct an in-memory "Test Output Tree" and a serializable "JSON Output Tree," making it ideal for snapshot testing and detailed component inspection. It is a core dependency for libraries like React Native Testing Library and provides direct access to React Reconciler options for advanced use cases, while fully supporting modern React 19 features such as Actions, useActionState, and useEffectEvent.

testing

npm install test-renderer

github ↗package ↗

INSTALL

IMPORT

SIG · TEST-RENDERER

test-renderer

testingjavascriptv1.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createRoot

✓ import { createRoot } from 'test-renderer';

✗ const { createRoot } = require('test-renderer');

The library primarily uses ES Module syntax. Ensure your test environment supports ESM or use a transpiler.

act

✓ import { act } from 'react';

✗ import { act } from 'test-renderer';

React's `act` utility is essential for ensuring all updates are processed in tests. It is imported directly from the `react` package, not `test-renderer`.

RootOptions

✓ import { type RootOptions } from 'test-renderer';

✗ import { RootOptions } from 'test-renderer';

Import `RootOptions` as a type for explicit type checking when configuring `createRoot`.

This quickstart demonstrates rendering, updating, and snapshot testing a React component using `test-renderer` and `act`.

import { createRoot } from "test-renderer"; import { act } from "react"; // Define a simple functional component for demonstration const GreetComponent = ({ name }: { name: string }) => <div>Hello, {name}!</div>; test("renders a component and updates it asynchronously", async () => { const renderer = createRoot(); // Initial render: Use `act` to flush all scheduled React updates await act(async () => { renderer.render(<GreetComponent name="World" />); }); expect(renderer.container).toMatchInlineSnapshot(` <> <div> Hello, World! </div> </> `); // Update render: Again, wrap in `act` for updates await act(async () => { renderer.render(<GreetComponent name="Jest" />); }); expect(renderer.container).toMatchInlineSnapshot(` <> <div> Hello, Jest! </div> </> `); renderer.unmount(); // Clean up the renderer });

Debug

Known issues

breakingThe package was renamed from `universal-test-renderer` to `test-renderer`. If upgrading from pre-v0.12.0 versions, you must update your package name and import paths.

fix

Update your `package.json` dependency to `test-renderer` and change all `import` statements from `universal-test-renderer` to `test-renderer`.

affects: <0.12.0

breakingVersion 1.0.0 introduced a new stable 1.x versioning model, specifically tracking React 19 compatibility. While efforts are made to maintain a broad React 19 peer dependency, minor `test-renderer` versions now align with specific React minor releases.

fix

Review the `docs/versioning.md` and compatibility table in the README to ensure your `test-renderer` version aligns with your installed `react` version for optimal support of new React features.

affects: >=1.0.0

gotchaAll operations that cause React state updates, including initial renders and subsequent updates, must be wrapped in `React.act()` to ensure all scheduled effects and updates are processed before assertions.

fix

Wrap your `renderer.render()` calls and any state-modifying interactions within `await act(async () => { /* ... */ });`.

affects: >=0.1.0

gotchaThe `render` method only supports React elements (JSX). Attempting to render non-element root values such as plain strings, numbers, or `null` will result in an error.

fix

Always pass a valid React element, such as `<MyComponent />` or `<div>Hello</div>`, to `renderer.render()`.

affects: >=0.1.0

gotchaThis library is designed for ES Module environments. Using CommonJS `require()` syntax might lead to errors or require additional build configuration.

fix

Ensure your project and testing setup are configured for ES Modules (e.g., `"type": "module"` in `package.json`, proper bundler/transpiler configuration for Jest/Vitest) and use `import` statements.

affects: >=0.1.0

Errors

Common errors & fixes

An update to <Component> inside a test was not wrapped in act(...).

React updates are happening asynchronously outside of an `act` block in your test.

fix

Wrap the code that causes the update (e.g., `renderer.render()`, event dispatches) with `await act(async () => { /* ... */ });`.

Error: `createRoot` expects a React element, but received: null

You attempted to render a `null` or a primitive value directly as the root element.

fix

Modify your `renderer.render()` call to always pass a valid React element, for example: `renderer.render(<div>Content</div>)` or `renderer.render(<MyComponent />)`.

SyntaxError: Cannot use import statement outside a module

Your JavaScript runtime or test environment is trying to execute ES Module `import` syntax in a CommonJS context.

fix

Configure your `package.json` with `"type": "module"`, or ensure your test runner (e.g., Jest) is set up to transpile ES Modules, or use an ES Module loader.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for rendering React components.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/mdjastrzebski/test-renderer ↗

packagehttps://www.npmjs.com/package/test-renderer ↗