Skip to content

Commit 51a99b9

Browse files
committed
Add testing sections
1 parent 903a2b0 commit 51a99b9

File tree

1 file changed

+49
-13
lines changed

1 file changed

+49
-13
lines changed

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

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ function FactoryComponent() {
208208
```
209209

210210
### Removing `createFactory` {/*removing-createfactory*/}
211-
`createFactory` was deprecated in [February 202 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory).
211+
`createFactory` was deprecated in [February 2020 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory).
212212

213213
Using `createFactory` was common before broad support for JSX, but it's rarely used today and can be replaced with JSX. In React 19, we're removing `createFactory` and you'll need to migrate to JSX:
214214

@@ -224,19 +224,52 @@ const button = createFactory('button');
224224
const button = <button />;
225225
```
226226

227-
### Removing react/test-utils {/*removing-react-test-utils*/}
227+
### Removing `react-test-renderer/shallow` {/*removing-react-test-renderer-shallow*/}
228228

229-
TODO (mention React.act)
229+
In React 18, we updated `react-test-renderer/shallow` to reexport [react-shallow-renderer](https://github.com/enzymejs/react-shallow-renderer). In React 19, we're removing `react-test-render/shallow` to prefer installing the package directly:
230230

231+
```bash
232+
npm install react-shallow-renderer --save-dev
233+
```
234+
```diff
235+
- import ShallowRenderer from 'react-test-renderer/shallow';
236+
+ import ShallowRenderer from 'react-shallow-renderer';
237+
```
231238

232-
### Removing react-test-renderer {/*removing-react-test-renderer*/}
239+
<Note>
233240

234-
TODO
241+
#### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/}
235242

243+
Shallow rendering depends on React internals and can block you from future upgrades. We recommend 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).
236244

245+
</Note>
237246

238247
## Removing deprecated React DOM APIs {/*removing-deprecated-react-dom-apis*/}
239248

249+
### Removing `react-dom/test-utils` {/*removing-react-dom-test-utils*/}
250+
251+
We've moved `act` from `react-dom/test-utils` to the `react` package:
252+
253+
<ConsoleBlockMulti>
254+
255+
<ConsoleLogLine level="error">
256+
257+
`ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom/test-utils`. See https://react.dev/warnings/react-dom-test-utils for more info.
258+
259+
</ConsoleLogLine>
260+
261+
</ConsoleBlockMulti>
262+
263+
To fix this warning, you can import `act` from `react`:
264+
265+
```diff
266+
- import {act} from 'react-dom/test-utils'
267+
+ import {act} from 'react';
268+
```
269+
270+
All other `test-utils` functions have been removed. These utilities were uncommon, and made it too easy to depend on low level implementation details of your components and React. In React 19, these functions will error when called and their exports will be removed in a future version.
271+
272+
See the [warning page](https://react.dev/warnings/react-dom-test-utils) to for alternatives.
240273

241274
### Removing `ReactDOM.render` {/*removing-reactdom-render*/}
242275

@@ -279,12 +312,6 @@ function AutoselectingInput() {
279312
}
280313
```
281314

282-
<Note>
283-
284-
TODO: note about React Native.
285-
286-
</Note>
287-
288315
## Breaking Changes {/*breaking-changes*/}
289316

290317
### SECRET_INTERNALS have been renamed {/*secret-internals-have-been-renamed*/}
@@ -306,12 +333,21 @@ TODO
306333

307334
## New Deprecations {/*new-deprecations*/}
308335

309-
- react: Warn when using defaultProps in functions, memo, lazy, and forwardRef (TODO)
310-
- react: Warn when spreading “key” as part of props in DEV (TODO)
336+
### Deprecating `react-test-renderer` {/*deprecating-react-test-renderer*/}
337+
338+
We are deprecating `react-test-renderer` because it implements its own renderer environment that doesn't match the environment users use, promotes testing implementation details, and relies on introspection of React's internals.
339+
340+
The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead.
341+
342+
In React 19, `react-test-renderer` log a deprecation warning, and has switched to concurrent rendering by default. We recommend 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.
343+
344+
311345

312346
## Other Breaking Changes {/*other-breaking-changes*/}
313347

314348
- UMD builds have been removed
349+
- react: Warn when using defaultProps in functions, memo, lazy, and forwardRef (TODO)
350+
- react: Warn when spreading “key” as part of props in DEV (TODO)
315351
- react-dom: Remove `errorInfo.digest` with warning (TODO)
316352
- react-dom: Removed unstable_renderSubtreeIntoContainer (TODO)
317353
- react-dom: Warn and don’t set empty string attributes for src/href (TODO: land)

0 commit comments

Comments
 (0)