Skip to content

Commit dc6c062

Browse files
committed
render
1 parent 96ffef8 commit dc6c062

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

website/docs/14.x/docs/api/render.mdx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ async function render<T>(
99
): Promise<RenderResult>;
1010
```
1111

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.
1313

1414
```jsx
1515
import { render, screen } from '@testing-library/react-native';
@@ -20,44 +20,44 @@ test('basic test', async () => {
2020
});
2121
```
2222

23-
> 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).
2424
2525
### Options
2626

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:
2828

2929
#### `wrapper`
3030

3131
```ts
3232
wrapper?: React.ComponentType<any>,
3333
```
3434

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 component in an additional wrapper component. Use this to create custom render functions for common React Context providers.
3636

3737
#### `createNodeMock` {#create-node-mock}
3838

3939
```ts
4040
createNodeMock?: (element: React.ReactElement) => object,
4141
```
4242

43-
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).
4444

4545
:::note Text string validation
4646

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.
4848

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.
5050

5151
:::
5252

5353
### Result
5454

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.
5656

5757
See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details.
5858

5959
:::note Type information
6060

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`.
6262

6363
:::

0 commit comments

Comments
 (0)