Migrate to React 19 (take 2) #2216
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- We set the `@types/react` and `@types/react-dom` package resolutions to `npm:types-react` and `npm:types-react-dom` according to the React 19 migration guide.
- `ReactDOM.render` and `ReactDOM.unmountComponentAtNode` have been removed in React 19. This commit replaces their usage with `rtl.render` and `root.unmount` as recommended in the React 19 migration guide.
- The `renderHook` method in `@testing-library/react-hooks` has now been moved to `@testing-library/react`. This commit updates imports and usages of the `renderHook` function to comply with the new syntax requirements in the [react-hooks-testing-library migration guide](https://github.com/testing-library/react-hooks-testing-library/blob/chore/migration-guide/MIGRATION_GUIDE.md#waitfornextupdate).
- `react-is` has changed the `REACT_ELEMENT_TYPE` symbol from `'react.element'` to `'react.transitional.element'`. We want our changes to be non-breaking and backwards-compatible so we conditionally set the `REACT_ELEMENT_TYPE` based on the detected version of React.
- According to `@testing-library/react` docs, the `cleanup` function is called automatically during the `afterEach` hook and there is no need to manually call it.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a repeat of #2172 , since the original PR is currently set to disallow maintainers adding update commits.
@aryaemami59 did all the work here, see that PR - I've just rebased this.
Original Description
This PR:
reactandreact-domto v19.@types/reactand@types/react-domto v19 according to the React 19 migration guide.react-test-rendererpackage as recommended in the React 19 migration guide.@testing-library/reactto latest version.@testing-library/jest-domto latest version.ReactDOM.rendercalls with therenderfunction from@testing-library/reactas recommended in the React 19 migration guide.ReactDOM.unmountComponentAtNodecalls with theunmountfunction from@testing-library/reactas recommended in the React 19 migration guide.renderHookfunction from@testing-library/react-hooksto@testing-library/reactas recommended by A Note about React 18 Support and react-hooks-testing-library React 18 Migration guide.@testing-library/react-hookspackage.renderHookcalls according to react-hooks-testing-library React 18 Migration guide.react-isimplementation.Click to expand
In [PR#28813](https://github.com/Rename the react.element symbol to react.transitional.element facebook/react#28813) `react-is` changed the `REACT_ELEMENT_TYPE` symbol from `'react.element'` to `'react.transitional.element'`. We want our changes to be non-breaking and backwards-compatible so we conditionally set the `REACT_ELEMENT_TYPE` based on the detected version of React. While this is not ideal, the `react-is` package is `CJS` and not very tree-shakable. So for now we want to inline it as to not add unnecessary weight to bundle sizes, not to mention the conditional React version check helps keep our changes backwards-compatible.react-isrelated detailsrtl.cleanupfunction calls insideafterEachhooks as per@testing-library/reactdocs, it is done automatically.reactand@types/reactinpeerDependenciesto include version 19.