{"id":14116,"library":"test-renderer","title":"React Test Renderer Replacement","description":"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.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/mdjastrzebski/test-renderer","tags":["javascript","jest","react","react-19","react-test-renderer","test-renderer","testing","typescript"],"install":[{"cmd":"npm install test-renderer","lang":"bash","label":"npm"},{"cmd":"yarn add test-renderer","lang":"bash","label":"yarn"},{"cmd":"pnpm add test-renderer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for rendering React components.","package":"react","optional":false}],"imports":[{"note":"The library primarily uses ES Module syntax. Ensure your test environment supports ESM or use a transpiler.","wrong":"const { createRoot } = require('test-renderer');","symbol":"createRoot","correct":"import { createRoot } from 'test-renderer';"},{"note":"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`.","wrong":"import { act } from 'test-renderer';","symbol":"act","correct":"import { act } from 'react';"},{"note":"Import `RootOptions` as a type for explicit type checking when configuring `createRoot`.","wrong":"import { RootOptions } from 'test-renderer';","symbol":"RootOptions","correct":"import { type RootOptions } from 'test-renderer';"}],"quickstart":{"code":"import { createRoot } from \"test-renderer\";\nimport { act } from \"react\";\n\n// Define a simple functional component for demonstration\nconst GreetComponent = ({ name }: { name: string }) => <div>Hello, {name}!</div>;\n\ntest(\"renders a component and updates it asynchronously\", async () => {\n  const renderer = createRoot();\n\n  // Initial render: Use `act` to flush all scheduled React updates\n  await act(async () => {\n    renderer.render(<GreetComponent name=\"World\" />);\n  });\n\n  expect(renderer.container).toMatchInlineSnapshot(`\n    <>\n      <div>\n        Hello, World!\n      </div>\n    </>\n  `);\n\n  // Update render: Again, wrap in `act` for updates\n  await act(async () => {\n    renderer.render(<GreetComponent name=\"Jest\" />);\n  });\n\n  expect(renderer.container).toMatchInlineSnapshot(`\n    <>\n      <div>\n        Hello, Jest!\n      </div>\n    </>\n  `);\n  renderer.unmount(); // Clean up the renderer\n});","lang":"typescript","description":"This quickstart demonstrates rendering, updating, and snapshot testing a React component using `test-renderer` and `act`."},"warnings":[{"fix":"Update your `package.json` dependency to `test-renderer` and change all `import` statements from `universal-test-renderer` to `test-renderer`.","message":"The 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.","severity":"breaking","affected_versions":"<0.12.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Wrap your `renderer.render()` calls and any state-modifying interactions within `await act(async () => { /* ... */ });`.","message":"All 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always pass a valid React element, such as `<MyComponent />` or `<div>Hello</div>`, to `renderer.render()`.","message":"The `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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"This library is designed for ES Module environments. Using CommonJS `require()` syntax might lead to errors or require additional build configuration.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'-19':129 '1.2':54 '1.2.0':32 '19':117 '19.2':58 'access':103 'action':121 'adher':35 'advanc':109 'cadenc':40 'case':111 'compat':46 'compon':86 'construct':64 'core':91 'current':28 'depend':92 'deprec':22 'detail':85 'direct':102 'e.g':53 'featur':118 'fulli':113 'ideal':80 'in-memori':66 'inspect':87 'javascript':125 'jest':126 'json':75 'leverag':60 'librari':34,94,99 'lightweight':11 'like':95 'line':47 'make':78 'memori':68 'minor':42,51 'modern':10,115 'nativ':97 'new':49 'option':107 'output':70,76 'packag':27 'provid':101 'rapid':38 'react':1,15,24,50,57,61,96,105,116,127,128,131 'react-test-render':23,130 'reconcil':62,106 'releas':39,52 'render':3,7,26,133,136 'replac':4,19 'serializ':74 'serv':16 'snapshot':82 'specif':44 'stabl':29 'support':114 'test':2,6,12,25,69,83,98,132,135,137 'test-render':5,134 'track':45 'tree':71,77 'typescript':138 'use':110 'useactionst':122 'useeffectev':124 'util':13 'version':31,43 'x':55","created_at":"2026-04-20T01:58:01.207313+00:00","updated_at":"2026-04-20T01:58:01.207313+00:00","problems":[{"fix":"Wrap the code that causes the update (e.g., `renderer.render()`, event dispatches) with `await act(async () => { /* ... */ });`.","cause":"React updates are happening asynchronously outside of an `act` block in your test.","error":"An update to <Component> inside a test was not wrapped in act(...)."},{"fix":"Modify your `renderer.render()` call to always pass a valid React element, for example: `renderer.render(<div>Content</div>)` or `renderer.render(<MyComponent />)`.","cause":"You attempted to render a `null` or a primitive value directly as the root element.","error":"Error: `createRoot` expects a React element, but received: null"},{"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.","cause":"Your JavaScript runtime or test environment is trying to execute ES Module `import` syntax in a CommonJS context.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/mdjastrzebski/test-renderer","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/test-renderer","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}