or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdtest-renderer.mdtree-traversal.md
tile.json

tessl/npm-react-test-renderer

Deprecated React renderer for creating pure JavaScript object representations of React component trees for testing purposes

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-test-renderer@19.1.x

To install, run

npx @tessl/cli install tessl/npm-react-test-renderer@19.1.0

index.mddocs/

React Test Renderer

React Test Renderer is a deprecated React renderer that provides an experimental API for creating pure JavaScript object representations of React component trees without requiring a DOM or native mobile environment. It enables snapshot testing by rendering React components to JavaScript objects that can be serialized and compared across test runs.

⚠️ DEPRECATION NOTICE: This package is deprecated as of React 19 and will be removed in a future version. The React team recommends @testing-library/react for DOM-based testing and @testing-library/react-native for React Native testing.

Package Information

  • Package Name: react-test-renderer
  • Package Type: npm
  • Language: JavaScript/TypeScript (with Flow types)
  • Installation: npm install react-test-renderer
  • Version: 19.1.1
  • Status: DEPRECATED

Core Imports

import { create, act } from 'react-test-renderer';

For CommonJS:

const { create, act } = require('react-test-renderer');

Basic Usage

import React from 'react';
import { create } from 'react-test-renderer';

// Create a test renderer instance
const component = create(<div>Hello World</div>);

// Get JSON representation for snapshot testing
const json = component.toJSON();
console.log(json);
// { type: 'div', props: {}, children: ['Hello World'] }

// Access the root instance for traversal
const root = component.root;
const divElement = root.findByType('div');

// Update with new element
component.update(<div>Updated Content</div>);

// Clean up
component.unmount();

Architecture

React Test Renderer is built around several key components:

  • Test Renderer Creation: The create() function that instantiates a test renderer for a React element
  • JSON Serialization: Converting the rendered tree to plain JavaScript objects for snapshot testing
  • Tree Traversal: ReactTestInstance class providing methods to search and navigate the component tree
  • Component Lifecycle: Update and unmount capabilities for testing component behavior over time
  • React Integration: Built on React's reconciler for accurate representation of React's rendering behavior

Capabilities

Test Renderer Creation

Core functionality for creating test renderer instances and managing their lifecycle. Essential for all testing scenarios.

function create(
  element: React.ReactElement<any>,
  options?: TestRendererOptions
): TestRenderer;

interface TestRendererOptions {
  createNodeMock?: (element: React.ReactElement<any>) => any;
  unstable_isConcurrent?: boolean;
  unstable_strictMode?: boolean;
}

interface TestRenderer {
  toJSON(): ReactTestRendererNode | Array<ReactTestRendererNode> | null;
  toTree(): any;
  update(element: React.ReactElement<any>): void;
  unmount(): void;
  getInstance(): React.Component<any, any> | any | null;
  readonly root: ReactTestInstance;
  unstable_flushSync: (fn: () => void) => void;
}

Test Renderer Creation

Tree Traversal and Search

ReactTestInstance methods for navigating and searching the rendered component tree. Critical for making assertions about rendered components.

class ReactTestInstance {
  readonly type: any;
  readonly props: object;
  readonly parent: ReactTestInstance | null;
  readonly children: Array<ReactTestInstance | string>;
  readonly instance: any;
  
  find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance;
  findByType(type: any): ReactTestInstance;
  findByProps(props: object): ReactTestInstance;
  findAll(predicate: (node: ReactTestInstance) => boolean, options?: FindOptions): Array<ReactTestInstance>;
  findAllByType(type: any, options?: FindOptions): Array<ReactTestInstance>;
  findAllByProps(props: object, options?: FindOptions): Array<ReactTestInstance>;
}

interface FindOptions {
  deep?: boolean;
}

Tree Traversal

Utilities

Testing utilities for managing React updates and batching.

function act(callback: () => void | Promise<void>): Promise<void>;
function unstable_batchedUpdates<T>(callback: () => T): T;

Types

type ReactTestRendererNode = ReactTestRendererJSON | string;

interface ReactTestRendererJSON {
  type: string;
  props: { [propName: string]: any };
  children: Array<ReactTestRendererNode> | null;
  $$typeof?: symbol;
}

type Predicate = (node: ReactTestInstance) => boolean | null;

Constants

const version: string;
const _Scheduler: any;

Removed Features

Shallow Renderer

The shallow renderer (react-test-renderer/shallow) has been completely removed as of React 19. Attempting to import it will throw an error:

// This will throw an error
import shallow from 'react-test-renderer/shallow';
// Error: "react-test-renderer/shallow has been removed. See https://react.dev/warnings/react-test-renderer."

Common Errors

  • "Can't access .root on unmounted test renderer": Thrown when accessing properties after unmounting
  • "Can't read from currently-mounting component. This error is likely caused by a bug in React. Please file an issue.": Thrown when accessing component during mount process
  • "No instances found" / "Expected 1 but found N instances": Thrown by find methods when results don't match expectations
  • "react-test-renderer/shallow has been removed": Thrown when attempting to import the removed shallow renderer