Skip to content

Commit 9892c21

Browse files
docs: document render options (#1129)
1 parent f80745f commit 9892c21

File tree

1 file changed

+39
-6
lines changed

1 file changed

+39
-6
lines changed

website/docs/API.md

+39-6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ title: API
66
### Table of contents:
77

88
- [`render`](#render)
9+
- [`render` options](#render-options)
10+
- [`wrapper` option](#wrapper-option)
11+
- [`createNodeMock` option](#createnodemock-option)
12+
- [`unstable_validateStringsRenderedWithinText` option](#unstable_validatestringsrenderedwithintext-option)
913
- [`...queries`](#queries)
1014
- [Example](#example)
1115
- [`update`](#update)
@@ -53,12 +57,7 @@ Defined as:
5357
```jsx
5458
function render(
5559
component: React.Element<any>,
56-
options?: {
57-
/* A React Component that renders `component` as children */
58-
wrapper?: React.ComponentType<any>,
59-
/* You won't often use this, but it's helpful when testing refs */
60-
createNodeMock: (element: React.Element<any>) => any,
61-
}
60+
options?: RenderOptions,
6261
): RenderResult {}
6362
```
6463

@@ -86,6 +85,40 @@ Latest `render` result is kept in [`screen`](#screen) variable that can be impor
8685
Using `screen` instead of destructuring `render` result is recommended approach. See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details.
8786
:::
8887

88+
### `render` options
89+
90+
The behavior of `render` method can be customized by passing various options as a second argument of `RenderOptions` type:
91+
92+
#### `wrapper` option
93+
94+
```ts
95+
wrapper?: React.ComponentType<any>,
96+
```
97+
98+
This options allows you to wrap tested component, passed as the first option to the `render()` function, in additional wrapper component. This is most useful for creating reusable custom render functions for common React Context providers.
99+
100+
#### `createNodeMock` option
101+
102+
```ts
103+
createNodeMock?: (element: React.Element<any>) => any,
104+
```
105+
106+
This options allows you to pass `createNodeMock` option to `ReactTestRenderer.create()` method in order to allow for custom mock refs. You can learn more about this options from [React Test Renderer documentation](https://reactjs.org/docs/test-renderer.html#ideas).
107+
108+
#### `unstable_validateStringsRenderedWithinText` option
109+
110+
```ts
111+
unstable_validateStringsRenderedWithinText?: boolean;
112+
```
113+
114+
:::note
115+
This options is experimental, in some cases it might not work as intended, and its behavior might change without observing [SemVer](https://semver.org/) requirements for breaking changes.
116+
:::
117+
118+
This **experimental** option allows you to replicate React Native behavior of throwing `Invariant Violation: Text strings must be rendered within a <Text> component` error when you try to render `string` value under components different than `<Text>`, e.g. under `<View>`.
119+
120+
This check is not enforced by React Test Renderer and hence by default React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests.
121+
89122
### `...queries`
90123

91124
The most important feature of `render` is providing a set of helpful queries that allow you to find certain elements in the view hierarchy.

0 commit comments

Comments
 (0)