Skip to content

Commit dcc0d51

Browse files
Merge branch 'main' of https://github.com/reactjs/react.dev into sync-b12743c3
2 parents cf20b20 + b12743c commit dcc0d51

File tree

5 files changed

+206
-5
lines changed

5 files changed

+206
-5
lines changed

src/content/blog/2024/04/25/react-19-upgrade-guide.md

+20-1
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ root.render(<App />);
405405

406406
<Note>
407407

408-
Codemod `ReactDOM.render` to `ReactDOM.createRoot`:
408+
Codemod `ReactDOM.render` to `ReactDOMClient.createRoot`:
409409

410410
```bash
411411
npx codemod@latest react/19/replace-reactdom-render
@@ -427,6 +427,15 @@ import {hydrateRoot} from 'react-dom/client';
427427
hydrateRoot(document.getElementById('root'), <App />);
428428
```
429429

430+
<Note>
431+
432+
Codemod `ReactDOM.hydrate` to `ReactDOMClient.hydrateRoot`:
433+
434+
```bash
435+
npx codemod@latest react/19/replace-reactdom-render
436+
```
437+
438+
</Note>
430439

431440
#### Removed: `unmountComponentAtNode` {/*removed-unmountcomponentatnode*/}
432441

@@ -443,8 +452,18 @@ root.unmount();
443452

444453
For more see `root.unmount()` for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot#root-unmount) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot#root-unmount).
445454

455+
<Note>
456+
457+
Codemod `unmountComponentAtNode` to `root.unmount`:
458+
459+
```bash
460+
npx codemod@latest react/19/replace-reactdom-render
461+
```
462+
463+
</Note>
446464

447465
#### Removed: `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/}
466+
448467
`ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode).
449468

450469
We're removing `findDOMNode` because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). You can replace `ReactDOM.findDOMNode` with [DOM refs](/learn/manipulating-the-dom-with-refs):

src/content/reference/react/act.md

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
title: act
3+
---
4+
5+
<Intro>
6+
7+
`act` is a test helper to apply pending React updates before making assertions.
8+
9+
```js
10+
await act(async actFn)
11+
```
12+
13+
</Intro>
14+
15+
To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
16+
17+
<Note>
18+
You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
19+
</Note>
20+
21+
22+
<InlineToc />
23+
24+
---
25+
26+
## Reference {/*reference*/}
27+
28+
### `await act(async actFn)` {/*await-act-async-actfn*/}
29+
30+
When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
31+
32+
The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
33+
34+
```js {2,4}
35+
it ('renders with button disabled', async () => {
36+
await act(async () => {
37+
root.render(<TestComponent />)
38+
});
39+
expect(container.querySelector('button')).toBeDisabled();
40+
});
41+
```
42+
43+
<Note>
44+
45+
We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
46+
47+
We will deprecate and remove the sync version in the future.
48+
49+
</Note>
50+
51+
#### Parameters {/*parameters*/}
52+
53+
* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
54+
55+
#### Returns {/*returns*/}
56+
57+
`act` does not return anything.
58+
59+
## Usage {/*usage*/}
60+
61+
When testing a component, you can use `act` to make assertions about its output.
62+
63+
For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
64+
65+
```js
66+
function Counter() {
67+
const [count, setCount] = useState(0);
68+
const handleClick = () => {
69+
setCount(prev => prev + 1);
70+
}
71+
72+
useEffect(() => {
73+
document.title = `You clicked ${this.state.count} times`;
74+
}, [count]);
75+
76+
return (
77+
<div>
78+
<p>You clicked {this.state.count} times</p>
79+
<button onClick={this.handleClick}>
80+
Click me
81+
</button>
82+
</div>
83+
)
84+
}
85+
```
86+
87+
### Rendering components in tests {/*rendering-components-in-tests*/}
88+
89+
To test the render output of a component, wrap the render inside `act()`:
90+
91+
```js {10,12}
92+
import {act} from 'react';
93+
import ReactDOM from 'react-dom/client';
94+
import Counter from './Counter';
95+
96+
it('can render and update a counter', async () => {
97+
container = document.createElement('div');
98+
document.body.appendChild(container);
99+
100+
// ✅ Render the component inside act().
101+
await act(() => {
102+
ReactDOM.createRoot(container).render(<Counter />);
103+
});
104+
105+
const button = container.querySelector('button');
106+
const label = container.querySelector('p');
107+
expect(label.textContent).toBe('You clicked 0 times');
108+
expect(document.title).toBe('You clicked 0 times');
109+
});
110+
```
111+
112+
Here, wwe create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
113+
114+
Using `act` ensures that all updates have been applied before we make assertions.
115+
116+
### Dispatching events in tests {/*dispatching-events-in-tests*/}
117+
118+
To test events, wrap the event dispatch inside `act()`:
119+
120+
```js {14,16}
121+
import {act} from 'react';
122+
import ReactDOM from 'react-dom/client';
123+
import Counter from './Counter';
124+
125+
it.only('can render and update a counter', async () => {
126+
const container = document.createElement('div');
127+
document.body.appendChild(container);
128+
129+
await act( async () => {
130+
ReactDOMClient.createRoot(container).render(<Counter />);
131+
});
132+
133+
// ✅ Dispatch the event inside act().
134+
await act(async () => {
135+
button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
136+
});
137+
138+
const button = container.querySelector('button');
139+
const label = container.querySelector('p');
140+
expect(label.textContent).toBe('You clicked 1 times');
141+
expect(document.title).toBe('You clicked 1 times');
142+
});
143+
```
144+
145+
Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
146+
147+
<Pitfall>
148+
149+
Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
150+
151+
</Pitfall>
152+
153+
## Troubleshooting {/*troubleshooting*/}
154+
155+
### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
156+
157+
Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
158+
159+
If you don't set the global, you will see an error like this:
160+
161+
<ConsoleBlock level="error">
162+
163+
Warning: The current testing environment is not configured to support act(...)
164+
165+
</ConsoleBlock>
166+
167+
To fix, add this to your global setup file for React tests:
168+
169+
```js
170+
global.IS_REACT_ACT_ENVIRONMENT=true
171+
```
172+
173+
<Note>
174+
175+
In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
176+
177+
</Note>

src/content/reference/react/apis.md

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo
1515
* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
1616
* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
1717
* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
18+
* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
1819

1920
---
2021

src/content/warnings/react-test-renderer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: react-test-renderer Deprecation Warnings
66

77
react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals.
88

9-
The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience.
9+
The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/start/intro) for a modern and well supported testing experience.
1010

1111

1212
## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/}

src/sidebarReference.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,10 @@
113113
"title": "APIs",
114114
"path": "/reference/react/apis",
115115
"routes": [
116+
{
117+
"title": "act",
118+
"path": "/reference/react/act"
119+
},
116120
{
117121
"title": "cache",
118122
"path": "/reference/react/cache",
@@ -343,8 +347,8 @@
343347
"path": "/reference/rules",
344348
"routes": [
345349
{
346-
"title": "Components and Hooks must be pure",
347-
"path": "/reference/rules/components-and-hooks-must-be-pure"
350+
"title": "Components and Hooks must be pure",
351+
"path": "/reference/rules/components-and-hooks-must-be-pure"
348352
},
349353
{
350354
"title": "React calls Components and Hooks",
@@ -430,4 +434,4 @@
430434
]
431435
}
432436
]
433-
}
437+
}

0 commit comments

Comments
 (0)