Skip to content

Commit 6aa1741

Browse files
committed
update docs
1 parent e4b4bea commit 6aa1741

File tree

3 files changed

+147
-1
lines changed

3 files changed

+147
-1
lines changed

website/docs/13.x/docs/api/events/fire-event.mdx

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ test('fire changeText event', () => {
3232
```
3333

3434
:::note
35-
Please note that from version `7.0` `fireEvent` performs checks that should prevent events firing on disabled elements.
35+
`fireEvent` performs checks that should prevent events firing on disabled elements.
3636
:::
3737

3838
An example using `fireEvent` with native events that aren't already aliased by the `fireEvent` api.
@@ -156,3 +156,58 @@ fireEvent.scroll(screen.getByText('scroll-view'), eventData);
156156
Prefer using [`user.scrollTo`](docs/api/events/user-event#scrollto) over `fireEvent.scroll` for `ScrollView`, `FlatList`, and `SectionList` components. User Event provides a more realistic event simulation based on React Native runtime behavior.
157157

158158
:::
159+
160+
161+
## `fireEventAsync`
162+
163+
:::info RNTL minimal version
164+
165+
This API requires RNTL v13.3.0 or later.
166+
167+
:::
168+
169+
170+
```ts
171+
async function fireEventAsync(element: ReactTestInstance, eventName: string, ...data: unknown[]): Promise<unknown>;
172+
```
173+
174+
The `fireEventAsync` function is the async version of `fireEvent` designed for working with React 19 and React Suspense. It wraps event handler execution in async `act()`, making it suitable for event handlers that trigger suspense boundaries or other async behavior.
175+
176+
```jsx
177+
import { renderAsync, screen, fireEventAsync } from '@testing-library/react-native';
178+
179+
test('async fire event test', async () => {
180+
await renderAsync(<MyAsyncComponent />);
181+
182+
// Use fireEventAsync when event handlers have async behavior
183+
await fireEventAsync(screen.getByText('Async Button'), 'press');
184+
185+
expect(screen.getByText('Async operation completed')).toBeOnTheScreen();
186+
});
187+
```
188+
189+
Like `fireEvent`, `fireEventAsync` also provides convenience methods for common events: `fireEventAsync.press`, `fireEventAsync.changeText`, and `fireEventAsync.scroll`.
190+
191+
### `fireEventAsync.press` {#async-press}
192+
193+
```
194+
fireEventAsync.press: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
195+
```
196+
197+
Async version of `fireEvent.press` designed for React 19 and React Suspense. Use when press event handlers trigger suspense boundaries or other async behavior.
198+
199+
### `fireEventAsync.changeText` {#async-change-text}
200+
201+
```
202+
fireEventAsync.changeText: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
203+
```
204+
205+
Async version of `fireEvent.changeText` designed for React 19 and React Suspense. Use when changeText event handlers trigger suspense boundaries or other async behavior.
206+
207+
### `fireEventAsync.scroll` {#async-scroll}
208+
209+
```
210+
fireEventAsync.scroll: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
211+
```
212+
213+
Async version of `fireEvent.scroll` designed for React 19 and React Suspense. Use when scroll event handlers trigger suspense boundaries or other async behavior.

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,43 @@ React Test Renderer does not enforce this check; hence, by default, React Native
6464
The `render` function returns the same queries and utilities as the [`screen`](docs/api/screen) object. We recommended using the `screen` object as more developer-friendly way.
6565

6666
See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details.
67+
68+
## `renderAsync` function
69+
70+
:::info RNTL minimal version
71+
72+
This API requires RNTL v13.3.0 or later.
73+
74+
:::
75+
76+
```jsx
77+
async function renderAsync(
78+
component: React.Element<any>,
79+
options?: RenderAsyncOptions
80+
): Promise<RenderAsyncResult>
81+
```
82+
83+
The `renderAsync` function is the async version of `render` designed for working with React 19 and React Suspense. It allows components to be properly rendered when they contain suspense boundaries or async behavior that needs to complete before the render result is returned.
84+
85+
```jsx
86+
import { renderAsync, screen } from '@testing-library/react-native';
87+
88+
test('async component test', async () => {
89+
await renderAsync(<MyAsyncApp />);
90+
expect(screen.getAllByRole('button', { name: 'start' })).toBeOnTheScreen();
91+
});
92+
```
93+
94+
### Options
95+
96+
`renderAsync` accepts the same options as `render`.
97+
98+
### Result
99+
100+
The `renderAsync` 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 async lifecycle methods from the render result when needed.
101+
102+
:::note Async lifecycle methods
103+
104+
When using `renderAsync`, you have to use correspodning lifecycle methods: `updateAsync`/`rerenderAsync` and `unmountAsync` instead of their sync versions.
105+
106+
::

website/docs/13.x/docs/api/screen.mdx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,35 @@ function rerender(element: React.Element<unknown>): void;
4141

4242
Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and `key`) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events.
4343

44+
### `rerenderAsync`
45+
46+
_Also available under `updateAsync` alias_
47+
48+
:::info RNTL minimal version
49+
50+
This API requires RNTL v13.3.0 or later.
51+
52+
:::
53+
54+
```ts
55+
function rerenderAsync(element: React.Element<unknown>): Promise<void>;
56+
```
57+
58+
Async versions of `rerender` designed for working with React 19 and React Suspense. These methods wait for async operations to complete during re-rendering, making them suitable for components that use suspense boundaries or other async behavior.
59+
60+
```jsx
61+
import { renderAsync, screen } from '@testing-library/react-native';
62+
63+
test('async rerender test', async () => {
64+
await renderAsync(<MyComponent initialData="first" />);
65+
66+
// Use async rerender when component has suspense or async behavior
67+
await screen.rerenderAsync(<MyComponent initialData="updated" />);
68+
69+
expect(screen.getByText('updated')).toBeOnTheScreen();
70+
});
71+
```
72+
4473
### `unmount`
4574

4675
```ts
@@ -50,7 +79,29 @@ function unmount(): void;
5079
Unmount the in-memory tree, triggering the appropriate lifecycle events.
5180

5281
:::note
82+
83+
Usually you should not need to call `unmount` as it is done automatically if your test runner supports `afterEach` hook (like Jest, mocha, Jasmine).
84+
85+
:::
86+
87+
### `unmountAsync`
88+
89+
:::info RNTL minimal version
90+
91+
This API requires RNTL v13.3.0 or later.
92+
93+
:::
94+
95+
```ts
96+
function unmountAsync(): Promise<void>;
97+
```
98+
99+
Async version of `unmount` designed for working with React 19 and React Suspense. This method waits for async cleanup operations to complete during unmounting, making it suitable for components that have async cleanup behavior.
100+
101+
:::note
102+
53103
Usually you should not need to call `unmount` as it is done automatically if your test runner supports `afterEach` hook (like Jest, mocha, Jasmine).
104+
54105
:::
55106

56107
### `debug`

0 commit comments

Comments
 (0)