0
# React Test Renderer
1
2
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.
3
4
**⚠️ 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](https://testing-library.com/docs/react-testing-library/intro) for DOM-based testing and @testing-library/react-native for React Native testing.
5
6
## Package Information
7
8
- **Package Name**: react-test-renderer
9
- **Package Type**: npm
10
- **Language**: JavaScript/TypeScript (with Flow types)
11
- **Installation**: `npm install react-test-renderer`
12
- **Version**: 19.1.1
13
- **Status**: DEPRECATED
14
15
## Core Imports
16
17
```javascript
18
import { create, act } from 'react-test-renderer';
19
```
20
21
For CommonJS:
22
23
```javascript
24
const { create, act } = require('react-test-renderer');
25
```
26
27
## Basic Usage
28
29
```javascript
30
import React from 'react';
31
import { create } from 'react-test-renderer';
32
33
// Create a test renderer instance
34
const component = create(<div>Hello World</div>);
35
36
// Get JSON representation for snapshot testing
37
const json = component.toJSON();
38
console.log(json);
39
// { type: 'div', props: {}, children: ['Hello World'] }
40
41
// Access the root instance for traversal
42
const root = component.root;
43
const divElement = root.findByType('div');
44
45
// Update with new element
46
component.update(<div>Updated Content</div>);
47
48
// Clean up
49
component.unmount();
50
```
51
52
## Architecture
53
54
React Test Renderer is built around several key components:
55
56
- **Test Renderer Creation**: The `create()` function that instantiates a test renderer for a React element
57
- **JSON Serialization**: Converting the rendered tree to plain JavaScript objects for snapshot testing
58
- **Tree Traversal**: ReactTestInstance class providing methods to search and navigate the component tree
59
- **Component Lifecycle**: Update and unmount capabilities for testing component behavior over time
60
- **React Integration**: Built on React's reconciler for accurate representation of React's rendering behavior
61
62
## Capabilities
63
64
### Test Renderer Creation
65
66
Core functionality for creating test renderer instances and managing their lifecycle. Essential for all testing scenarios.
67
68
```javascript { .api }
69
function create(
70
element: React.ReactElement<any>,
71
options?: TestRendererOptions
72
): TestRenderer;
73
74
interface TestRendererOptions {
75
createNodeMock?: (element: React.ReactElement<any>) => any;
76
unstable_isConcurrent?: boolean;
77
unstable_strictMode?: boolean;
78
}
79
80
interface TestRenderer {
81
toJSON(): ReactTestRendererNode | Array<ReactTestRendererNode> | null;
82
toTree(): any;
83
update(element: React.ReactElement<any>): void;
84
unmount(): void;
85
getInstance(): React.Component<any, any> | any | null;
86
readonly root: ReactTestInstance;
87
unstable_flushSync: (fn: () => void) => void;
88
}
89
```
90
91
[Test Renderer Creation](./test-renderer.md)
92
93
### Tree Traversal and Search
94
95
ReactTestInstance methods for navigating and searching the rendered component tree. Critical for making assertions about rendered components.
96
97
```javascript { .api }
98
class ReactTestInstance {
99
readonly type: any;
100
readonly props: object;
101
readonly parent: ReactTestInstance | null;
102
readonly children: Array<ReactTestInstance | string>;
103
readonly instance: any;
104
105
find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance;
106
findByType(type: any): ReactTestInstance;
107
findByProps(props: object): ReactTestInstance;
108
findAll(predicate: (node: ReactTestInstance) => boolean, options?: FindOptions): Array<ReactTestInstance>;
109
findAllByType(type: any, options?: FindOptions): Array<ReactTestInstance>;
110
findAllByProps(props: object, options?: FindOptions): Array<ReactTestInstance>;
111
}
112
113
interface FindOptions {
114
deep?: boolean;
115
}
116
```
117
118
[Tree Traversal](./tree-traversal.md)
119
120
### Utilities
121
122
Testing utilities for managing React updates and batching.
123
124
```javascript { .api }
125
function act(callback: () => void | Promise<void>): Promise<void>;
126
function unstable_batchedUpdates<T>(callback: () => T): T;
127
```
128
129
## Types
130
131
```javascript { .api }
132
type ReactTestRendererNode = ReactTestRendererJSON | string;
133
134
interface ReactTestRendererJSON {
135
type: string;
136
props: { [propName: string]: any };
137
children: Array<ReactTestRendererNode> | null;
138
$$typeof?: symbol;
139
}
140
141
type Predicate = (node: ReactTestInstance) => boolean | null;
142
```
143
144
## Constants
145
146
```javascript { .api }
147
const version: string;
148
const _Scheduler: any;
149
```
150
151
## Removed Features
152
153
### Shallow Renderer
154
155
The shallow renderer (`react-test-renderer/shallow`) has been completely removed as of React 19. Attempting to import it will throw an error:
156
157
```javascript
158
// This will throw an error
159
import shallow from 'react-test-renderer/shallow';
160
// Error: "react-test-renderer/shallow has been removed. See https://react.dev/warnings/react-test-renderer."
161
```
162
163
## Common Errors
164
165
- **"Can't access .root on unmounted test renderer"**: Thrown when accessing properties after unmounting
166
- **"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
167
- **"No instances found" / "Expected 1 but found N instances"**: Thrown by find methods when results don't match expectations
168
- **"react-test-renderer/shallow has been removed"**: Thrown when attempting to import the removed shallow renderer