Skip to content

Commit 18a683d

Browse files
committed
.
1 parent 28eb358 commit 18a683d

File tree

1 file changed

+21
-25
lines changed

1 file changed

+21
-25
lines changed
Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
11
# React 19 & Suspense Support
22

3-
React 19 introduced full support for React Suspense, [`React.use()`](https://react.dev/reference/react/use), and other async rendering features to React Native [0.78.0](https://github.com/facebook/react-native/releases/tag/v0.78.0). These new capabilities enable more sophisticated async patterns in your React Native apps, but they also require updates to your testing approach.
3+
React 19 introduced full support for React Suspense, [`React.use()`](https://react.dev/reference/react/use), and other async rendering features to React Native [0.78.0](https://github.com/facebook/react-native/releases/tag/v0.78.0).
44

5-
## Why New Testing APIs Are Needed
5+
When testing components that use these features, React requires the [`async act`](https://react.dev/reference/react/act) helper to handle async state updates. This means React Native Testing Library needs new async versions of its core APIs. These async APIs work with both React 18 and React 19.
66

7-
React 19's async rendering features (like Suspense and `React.use()`) make React's rendering process inherently asynchronous. When testing components that use these features, React requires the [`async act`](https://react.dev/reference/react/act) helper to properly handle async state updates.
8-
9-
This need for async handling led to the creation of new async versions of RNTL's core APIs. These async APIs work with both React 18 and React 19, making them forward-compatible choices for your test suite.
10-
11-
## New Async APIs in RNTL 13.3
7+
## New async APIs
128

139
RNTL 13.3 introduces async versions of the core testing APIs to handle React 19's async rendering:
1410

1511
**Rendering APIs:**
16-
- **[`renderAsync`](docs/api/render#render-async)** - async version of [`render`](docs/api/render)
17-
- **[`screen.rerenderAsync`](docs/api/screen#rerender-async)** - async version of [`screen.rerender`](docs/api/screen#rerender)
18-
- **[`screen.unmountAsync`](docs/api/screen#unmount-async)** - async version of [`screen.unmount`](docs/api/screen#unmount)
12+
- **[`renderAsync`](docs/api/render#render-async)** - async version of `render`
13+
- **[`screen.rerenderAsync`](docs/api/screen#rerender-async)** - async version of `screen.rerender`
14+
- **[`screen.unmountAsync`](docs/api/screen#unmount-async)** - async version of `screen.unmount`
1915

2016
**Event APIs:**
21-
- **[`fireEventAsync`](docs/api/fire-event#fire-event-async)** - async version of [`fireEvent`](docs/api/fire-event#fire-event)
17+
- **[`fireEventAsync`](docs/api/fire-event#fire-event-async)** - async version of `fireEvent`
2218

23-
## APIs That Remain Unchanged
19+
## APIs that remain unchanged
2420

2521
Many existing APIs continue to work without modification:
2622

27-
- **Query methods** - `screen.getBy*`, `screen.queryBy*`, `screen.findBy*` all work the same
28-
- **[`userEvent`](docs/api/user-event)** - already async, so no API changes needed
29-
- **Jest matchers** - work with already-rendered output, so no changes required
23+
- **[Query methods](docs/api/queries)**: `screen.getBy*`, `screen.queryBy*`, `screen.findBy*` - all work the same
24+
- **[User Event API](docs/api/events/user-event)** - already async, so no API changes needed
25+
- **[Jest matchers](docs/api/jest-matchers)** - work with already-rendered output, so no changes required
3026

31-
## What Changes in Your Tests
27+
## What changes in your tests
3228

33-
### Making Tests Async
29+
### Making tests async
3430

3531
The main change is using [`renderAsync`](docs/api/render#renderasync) instead of `render`, which requires:
3632
1. Making your test function `async`
@@ -50,23 +46,23 @@ test('my component', async () => {
5046
});
5147
```
5248

53-
### When to Use Async APIs
49+
### When to use async APIs
5450

5551
Use the async APIs when your components:
5652
- Use React Suspense for data fetching or code splitting
5753
- Call `React.use()` for reading promises or context
5854
- Have async state updates that need proper `act()` handling
5955

60-
## Migration Strategy
56+
## Migration strategy
6157

62-
### For New Projects
63-
Use the async APIs (`renderAsync`, User Event, etc.) from the start. They work with both React 18 and React 19, making your tests future-ready.
58+
### New projects
59+
Use the async-ready APIs (`renderAsync`, User Event, Jest Matchers, etc.) from the start. They work with both React 18 and React 19.
6460

65-
### For Existing Projects
61+
### Existing projects
6662
You can migrate gradually:
6763
- **Existing tests** continue to work with synchronous APIs (`render`, etc.)
6864
- **New tests** should use async APIs
69-
- **Tests with Suspense/React.use()** must use async APIs
65+
- **Tests with Suspense/`React.use()`** must use async APIs
7066

71-
### Future Direction
72-
We expect async APIs to become the default recommendation as React 19 adoption grows. Starting with async APIs now will save migration effort later.
67+
### Future direction
68+
Async APIs will become the default recommendation as React 19 adoption grows. Starting with them now saves migration effort later.

0 commit comments

Comments
 (0)