Skip to content

Commit 4bf2a23

Browse files
committed
docs
1 parent 6f37bf9 commit 4bf2a23

File tree

4 files changed

+65
-14
lines changed

4 files changed

+65
-14
lines changed

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,6 @@ Prefer using [`user.scrollTo`](docs/api/events/user-event#scrollto) over `fireEv
157157

158158
:::
159159

160-
161160
## `fireEventAsync`
162161

163162
:::info RNTL minimal version
@@ -166,12 +165,15 @@ This API requires RNTL v13.3.0 or later.
166165

167166
:::
168167

169-
170168
```ts
171-
async function fireEventAsync(element: ReactTestInstance, eventName: string, ...data: unknown[]): Promise<unknown>;
169+
async function fireEventAsync(
170+
element: ReactTestInstance,
171+
eventName: string,
172+
...data: unknown[]
173+
): Promise<unknown>;
172174
```
173175

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.
176+
The `fireEventAsync` function is the async version of `fireEvent` designed for working with React 19 and React Suspense. This function uses async `act` function internally to ensure all pending React updates are executed during event handling.
175177

176178
```jsx
177179
import { renderAsync, screen, fireEventAsync } from '@testing-library/react-native';
@@ -192,20 +194,20 @@ Like `fireEvent`, `fireEventAsync` also provides convenience methods for common
192194
fireEventAsync.press: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
193195
```
194196

195-
Async version of `fireEvent.press` designed for React 19 and React Suspense. Use when press event handlers trigger suspense boundaries or other async behavior.
197+
Async version of `fireEvent.press` designed for React 19 and React Suspense. Use when press event handlers trigger suspense boundaries.
196198

197199
### `fireEventAsync.changeText` {#async-change-text}
198200

199201
```
200202
fireEventAsync.changeText: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
201203
```
202204

203-
Async version of `fireEvent.changeText` designed for React 19 and React Suspense. Use when changeText event handlers trigger suspense boundaries or other async behavior.
205+
Async version of `fireEvent.changeText` designed for React 19 and React Suspense. Use when changeText event handlers trigger suspense boundaries.
204206

205207
### `fireEventAsync.scroll` {#async-scroll}
206208

207209
```
208210
fireEventAsync.scroll: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
209211
```
210212

211-
Async version of `fireEvent.scroll` designed for React 19 and React Suspense. Use when scroll event handlers trigger suspense boundaries or other async behavior.
213+
Async version of `fireEvent.scroll` designed for React 19 and React Suspense. Use when scroll event handlers trigger suspense boundaries.

website/docs/13.x/docs/api/misc/render-hook.mdx

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
```ts
44
function renderHook<Result, Props>(
5-
callback: (props?: Props) => Result,
5+
hookFn: (props?: Props) => Result,
66
options?: RenderHookOptions<Props>
77
): RenderHookResult<Result, Props>;
88
```
@@ -129,3 +129,52 @@ it('should use context value', () => {
129129
// ...
130130
});
131131
```
132+
133+
## `renderHookAsync` function
134+
135+
```ts
136+
async function renderHookAsync<Result, Props>(
137+
hookFn: (props?: Props) => Result,
138+
options?: RenderHookOptions<Props>
139+
): Promise<RenderHookAsyncResult<Result, Props>>;
140+
```
141+
142+
Async versions of `renderHook` designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during rendering.
143+
144+
- **Returns a Promise**: Should be awaited
145+
- **Async methods**: Both `rerender` and `unmount` return Promises and should be awaited
146+
- **Suspense support**: Compatible with React Suspense boundaries and `React.use()`
147+
148+
### Result {#result-async}
149+
150+
```ts
151+
interface RenderHookAsyncResult<Result, Props> {
152+
result: { current: Result };
153+
rerender: (props: Props) => Promise<void>;
154+
unmount: () => Promise<void>;
155+
}
156+
```
157+
158+
The `RenderHookAsyncResult` differs from `RenderHookResult` in that `rerender` and `unmount` are async functions.
159+
160+
```ts
161+
import { renderHookAsync, act } from '@testing-library/react-native';
162+
163+
test('should handle async hook behavior', async () => {
164+
const { result, rerender } = await renderHookAsync(useAsyncHook);
165+
166+
// Test initial state
167+
expect(result.current.loading).toBe(true);
168+
169+
// Wait for async operation to complete
170+
await act(async () => {
171+
await new Promise((resolve) => setTimeout(resolve, 100));
172+
});
173+
174+
// Re-render to get updated state
175+
await rerender();
176+
expect(result.current.loading).toBe(false);
177+
});
178+
```
179+
180+
Use `renderHookAsync` when testing hooks that use React Suspense, `React.use()`, or other concurrent features where timing of re-renders matters.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,10 @@ This API requires RNTL v13.3.0 or later.
7777
async function renderAsync(
7878
component: React.Element<any>,
7979
options?: RenderAsyncOptions
80-
): Promise<RenderAsyncResult>
80+
): Promise<RenderAsyncResult>;
8181
```
8282

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.
83+
The `renderAsync` function is the async version of `render` designed for working with React 19 and React Suspense. This function uses async `act` function internally to ensure all pending React updates are executed during rendering.
8484

8585
```jsx
8686
import { renderAsync, screen } from '@testing-library/react-native';

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,17 @@ This API requires RNTL v13.3.0 or later.
5555
function rerenderAsync(element: React.Element<unknown>): Promise<void>;
5656
```
5757

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.
58+
Async versions of `rerender` designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during updating.
5959

6060
```jsx
6161
import { renderAsync, screen } from '@testing-library/react-native';
6262

6363
test('async rerender test', async () => {
6464
await renderAsync(<MyComponent initialData="first" />);
65-
65+
6666
// Use async rerender when component has suspense or async behavior
6767
await screen.rerenderAsync(<MyComponent initialData="updated" />);
68-
68+
6969
expect(screen.getByText('updated')).toBeOnTheScreen();
7070
});
7171
```
@@ -96,7 +96,7 @@ This API requires RNTL v13.3.0 or later.
9696
function unmountAsync(): Promise<void>;
9797
```
9898

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.
99+
Async version of `unmount` designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during unmounting.
100100

101101
:::note
102102

0 commit comments

Comments
 (0)