test-renderer 0.14.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -31
- package/dist/index.cjs +254 -75
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -17
- package/dist/index.d.ts +28 -17
- package/dist/index.js +254 -75
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
A lightweight, JS-only building block for creating Testing Library-style libraries.
|
|
4
4
|
|
|
5
|
-
This library is used by [React Native Testing Library](https://github.com/callstack/react-native-testing-library) but
|
|
5
|
+
This library is used by [React Native Testing Library](https://github.com/callstack/react-native-testing-library) but should work with any React variant.
|
|
6
6
|
|
|
7
|
-
This library
|
|
7
|
+
This library replaces the deprecated React Test Renderer. It uses [React Reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler) to build a custom renderer that operates on host elements by default, and provides escape hatches for complex use-cases. Most React Reconciler options are exposed through `RootOptions`.
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
@@ -36,6 +36,34 @@ test("renders a component", async () => {
|
|
|
36
36
|
});
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
## Supported React Features
|
|
40
|
+
|
|
41
|
+
This library supports all modern React features including:
|
|
42
|
+
|
|
43
|
+
- Concurrent rendering
|
|
44
|
+
- Error boundaries
|
|
45
|
+
- Suspense boundaries
|
|
46
|
+
|
|
47
|
+
## Test Output Tree
|
|
48
|
+
|
|
49
|
+
Instead of producing a DOM tree or a native view hierarchy, the renderer builds an in-memory **Test Output Tree**:
|
|
50
|
+
|
|
51
|
+
- Composed of **`TestNode`s**, where each node is either:
|
|
52
|
+
- A **`TestInstance`** — represents a host element such as `div` or `View`
|
|
53
|
+
- A plain **`string`** — represents a text node
|
|
54
|
+
- The root is accessible via `root.container`, a `TestInstance` whose `type` is an empty string
|
|
55
|
+
- `TestInstance` nodes are traversable and queryable — see the [`TestInstance`](#testelement) API below
|
|
56
|
+
|
|
57
|
+
## JSON Output Tree
|
|
58
|
+
|
|
59
|
+
Calling `toJSON()` on a `TestInstance` produces a **JSON Output Tree** — a static, plain-object snapshot of the Test Output Tree at that point in time:
|
|
60
|
+
|
|
61
|
+
- Composed of **`JsonNode`s**, where each node is either:
|
|
62
|
+
- A **`JsonElement`** — a plain object with `type`, `props`, and `children`
|
|
63
|
+
- A plain **`string`** — a text node
|
|
64
|
+
- Contains no live references, making it safe to serialize
|
|
65
|
+
- Ideal for snapshot testing
|
|
66
|
+
|
|
39
67
|
## API Reference
|
|
40
68
|
|
|
41
69
|
### `createRoot(options?)`
|
|
@@ -50,7 +78,7 @@ Creates a new test renderer root instance.
|
|
|
50
78
|
|
|
51
79
|
- `render(element: ReactElement)`: Renders a React element into the root. Must be called within `act()`.
|
|
52
80
|
- `unmount()`: Unmounts the root and cleans up. Must be called within `act()`.
|
|
53
|
-
- `container`: A `
|
|
81
|
+
- `container`: A `TestInstance` wrapper that contains the rendered element(s). Use this to query and inspect the rendered tree.
|
|
54
82
|
|
|
55
83
|
**Example:**
|
|
56
84
|
|
|
@@ -65,33 +93,33 @@ await act(async () => {
|
|
|
65
93
|
|
|
66
94
|
Configuration options for the test renderer. Many of these options correspond to React Reconciler configuration options. For detailed information about reconciler-specific options, refer to the [React Reconciler source code](https://github.com/facebook/react/tree/main/packages/react-reconciler).
|
|
67
95
|
|
|
68
|
-
| Option
|
|
69
|
-
|
|
|
70
|
-
| `textComponentTypes`
|
|
71
|
-
| `publicTextComponentTypes`
|
|
72
|
-
| `
|
|
73
|
-
| `identifierPrefix`
|
|
74
|
-
| `isStrictMode`
|
|
75
|
-
| `onCaughtError`
|
|
76
|
-
| `onUncaughtError`
|
|
77
|
-
| `onRecoverableError`
|
|
96
|
+
| Option | Type | Description |
|
|
97
|
+
| ------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
98
|
+
| `textComponentTypes` | `string[]` | Types of host components that are allowed to contain text nodes. Trying to render text outside of these components will throw an error. Useful for simulating React Native's text rendering rules. |
|
|
99
|
+
| `publicTextComponentTypes` | `string[]` | Host component types to display to users in error messages when they try to render text outside of `textComponentTypes`. Defaults to `textComponentTypes` if not provided. |
|
|
100
|
+
| `transformHiddenInstanceProps` | `({ props, type }: { props: Record<string, unknown>; type: string }) => Record<string, unknown>` | Transforms host instance props when React marks an instance as hidden (for example, while Suspense fallback is shown). Return a new props object instead of mutating the provided one. When provided, hidden instances stay visible in `children` and `toJSON()` output using transformed props. |
|
|
101
|
+
| `identifierPrefix` | `string` | A string prefix React uses for IDs generated by `useId()`. Useful to avoid conflicts when using multiple roots. |
|
|
102
|
+
| `isStrictMode` | `boolean` | Enable React Strict Mode. When enabled, components render twice and effects run twice in development. |
|
|
103
|
+
| `onCaughtError` | `(error: unknown, errorInfo: { componentStack?: string }) => void` | Callback called when React catches an error in an Error Boundary. Called with the error caught by the Error Boundary and an errorInfo object containing the component stack. |
|
|
104
|
+
| `onUncaughtError` | `(error: unknown, errorInfo: { componentStack?: string }) => void` | Callback called when an error is thrown and not caught by an Error Boundary. Called with the error that was thrown and an errorInfo object containing the component stack. |
|
|
105
|
+
| `onRecoverableError` | `(error: unknown, errorInfo: { componentStack?: string }) => void` | Callback called when React automatically recovers from errors. Called with an error React throws and an errorInfo object containing the component stack. Some recoverable errors may include the original error cause as `error.cause`. |
|
|
78
106
|
|
|
79
|
-
### `
|
|
107
|
+
### `TestInstance` {#test-instance}
|
|
80
108
|
|
|
81
|
-
A wrapper around rendered host elements
|
|
109
|
+
A wrapper around rendered host elements with a DOM-like API for querying and inspecting the rendered tree.
|
|
82
110
|
|
|
83
111
|
**Properties:**
|
|
84
112
|
|
|
85
113
|
- `type: string`: The element type (e.g., `"View"`, `"div"`). Returns an empty string for the container element.
|
|
86
|
-
- `props:
|
|
87
|
-
- `children: HostNode[]`: Array of child nodes (elements and text strings). Hidden children are excluded.
|
|
88
|
-
- `parent:
|
|
114
|
+
- `props: Record<string, all>`: The element's props object.
|
|
115
|
+
- `children: HostNode[]`: Array of child nodes (elements and text strings). Hidden children are excluded by default, but are included when `transformHiddenInstanceProps` is configured.
|
|
116
|
+
- `parent: TestInstance | null`: The parent element, or `null` if this is the root container.
|
|
89
117
|
- `unstable_fiber: Fiber | null`: Access to the underlying React Fiber node. **Warning:** This is an unstable API that exposes internal React Reconciler structures which may change without warning in future React versions. Use with caution and only when absolutely necessary.
|
|
90
118
|
|
|
91
119
|
**Methods:**
|
|
92
120
|
|
|
93
|
-
- `toJSON(): JsonElement | null`: Converts this element to a JSON representation suitable for snapshots. Returns `null`
|
|
94
|
-
- `queryAll(predicate: (
|
|
121
|
+
- `toJSON(): JsonElement | null`: Converts this element to a JSON representation suitable for snapshots. Returns `null` for hidden elements only when `transformHiddenInstanceProps` is not configured.
|
|
122
|
+
- `queryAll(predicate: (instance: TestInstance) => boolean, options?: QueryOptions): TestInstance[]`: Finds all descendant elements matching the predicate. See [Query Options](#query-options) below.
|
|
95
123
|
|
|
96
124
|
**Example:**
|
|
97
125
|
|
|
@@ -101,7 +129,7 @@ await act(async () => {
|
|
|
101
129
|
renderer.render(<div className="container">Hello</div>);
|
|
102
130
|
});
|
|
103
131
|
|
|
104
|
-
const root = renderer.container.children[0] as
|
|
132
|
+
const root = renderer.container.children[0] as TestInstance;
|
|
105
133
|
expect(root.type).toBe("div");
|
|
106
134
|
expect(root.props.className).toBe("container");
|
|
107
135
|
expect(root.children).toContain("Hello");
|
|
@@ -131,11 +159,11 @@ const includingSelf = container.queryAll((el) => el.type === "div", { includeSel
|
|
|
131
159
|
|
|
132
160
|
## Migration from React Test Renderer
|
|
133
161
|
|
|
134
|
-
This library
|
|
162
|
+
This library replaces the deprecated React Test Renderer. The main differences:
|
|
135
163
|
|
|
136
|
-
- **Host element focus**:
|
|
137
|
-
- **Built on React Reconciler**:
|
|
138
|
-
- **Exposed reconciler options**: Most React Reconciler configuration options are
|
|
164
|
+
- **Host element focus**: Operates on host components by default, while React Test Renderer worked with a mix of host and composite components. Access the underlying fiber via `unstable_fiber` if needed.
|
|
165
|
+
- **Built on React Reconciler**: Uses React Reconciler to implement a custom renderer.
|
|
166
|
+
- **Exposed reconciler options**: Most React Reconciler configuration options are available through `RootOptions`.
|
|
139
167
|
|
|
140
168
|
For most use cases, the migration is straightforward:
|
|
141
169
|
|
|
@@ -144,7 +172,7 @@ For most use cases, the migration is straightforward:
|
|
|
144
172
|
import TestRenderer from "react-test-renderer";
|
|
145
173
|
const tree = TestRenderer.create(<MyComponent />);
|
|
146
174
|
|
|
147
|
-
// After (
|
|
175
|
+
// After (Test Renderer)
|
|
148
176
|
import { createRoot } from "test-renderer";
|
|
149
177
|
const root = createRoot();
|
|
150
178
|
await act(async () => {
|
|
@@ -153,13 +181,23 @@ await act(async () => {
|
|
|
153
181
|
const tree = root.container;
|
|
154
182
|
```
|
|
155
183
|
|
|
156
|
-
##
|
|
184
|
+
## Performance Metrics
|
|
157
185
|
|
|
158
|
-
|
|
186
|
+
The library includes optional performance instrumentation using the [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance). All marks and measures are prefixed with `test-renderer/` for easy filtering.
|
|
159
187
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
188
|
+
```tsx
|
|
189
|
+
globalThis.TEST_RENDERER_ENABLE_PROFILING = true;
|
|
190
|
+
|
|
191
|
+
// Run your tests, then query metrics:
|
|
192
|
+
const marks = performance
|
|
193
|
+
.getEntriesByType("mark")
|
|
194
|
+
.filter((m) => m.name.startsWith("test-renderer/"));
|
|
195
|
+
const measures = performance
|
|
196
|
+
.getEntriesByType("measure")
|
|
197
|
+
.filter((m) => m.name.startsWith("test-renderer/"));
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
**Note:** The specific marks and measures emitted are unstable and may change between versions. Performance metrics are disabled by default.
|
|
163
201
|
|
|
164
202
|
## License
|
|
165
203
|
|