You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/14.x/docs/api/render.mdx
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ async function render<T>(
9
9
):Promise<RenderResult>;
10
10
```
11
11
12
-
The `render` function is the entry point for writing React Native Testing Library tests. It deeply renders the given React element and returns helpers to query the output components' structure. This function is async by default and uses async `act` internally to ensure all pending React updates are executed during rendering, making it compatible with async React features like `Suspense`boundary or`use()` hook.
12
+
The `render` function is the entry point for writing React Native Testing Library tests. It deeply renders the given React element and returns helpers to query the output. The function is async and uses async `act` internally, so all pending React updates run before it resolves. This works with async React features like `Suspense`boundaries and the`use()` hook.
> When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom`render`method. [Follow this great guide on how to set this up](https://testing-library.com/docs/react-testing-library/setup#custom-render).
23
+
> When using React context providers like Redux Provider, you'll likely want to wrap the rendered component with them. In such cases, create your own custom`render`method. [Follow this guide on how to set it up](https://testing-library.com/docs/react-testing-library/setup#custom-render).
24
24
25
25
### Options
26
26
27
-
The behavior of the `render` method can be customized by passing various options as a second argument of the `RenderOptions` type:
27
+
You can customize the `render` method by passing options as the second argument:
28
28
29
29
#### `wrapper`
30
30
31
31
```ts
32
32
wrapper?:React.ComponentType<any>,
33
33
```
34
34
35
-
This option allows you to wrap the tested component, passed as the first option to the `render()` function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers.
35
+
Wraps the tested componentin an additional wrapper component. Use this to create custom render functions for common React Context providers.
This option allows you to pass `createNodeMock`option to the renderer's `create()` method in order to allow for custom mock refs. This option is passed through to [Test Renderer](https://github.com/mdjastrzebski/test-renderer).
43
+
Passes `createNodeMock` to the renderer's `create()` method for custom mock refs. This option is passed through to [Test Renderer](https://github.com/mdjastrzebski/test-renderer).
44
44
45
45
:::note Text string validation
46
46
47
-
Test Renderer automatically enforces React Native's requirement that text strings must be rendered within a `<Text>` component. If you try to render a `string` value under components other than `<Text>` (e.g., under `<View>`), it will throw an `Invariant Violation: Text strings must be rendered within a <Text> component` error, matching React Native's runtime behavior.
47
+
Test Renderer enforces React Native's requirement that text strings must be rendered within a `<Text>` component. If you render a `string` value under components other than `<Text>` (e.g., under `<View>`), it throws an `Invariant Violation: Text strings must be rendered within a <Text> component` error. This matches React Native's runtime behavior.
48
48
49
-
This validation is always enabled and cannot be disabled, ensuring your tests accurately reflect how your code will behave in production.
49
+
This validation is always enabled and cannot be disabled. Your tests will catch the same text rendering errors that would occur in production.
50
50
51
51
:::
52
52
53
53
### Result
54
54
55
-
The `render` function returns a promise that resolves to the same queries and utilities as the [`screen`](/docs/api/screen) object. We recommend using the `screen` object for queries and the lifecycle methods from the render result when needed.
55
+
The `render` function returns a promise that resolves to the same queries and utilities as the [`screen`](/docs/api/screen) object. Use `screen` for queries and the lifecycle methods from the render result when needed.
56
56
57
57
See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details.
58
58
59
59
:::note Type information
60
60
61
-
Query results and element references use the `HostElement` type from [Test Renderer](https://github.com/mdjastrzebski/test-renderer). If you need to type element variables, you can import this type directly from `test-renderer`.
61
+
Query results and element references use the `HostElement` type from [Test Renderer](https://github.com/mdjastrzebski/test-renderer). If you need to type element variables, import this type directly from `test-renderer`.
0 commit comments