Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make React 19 the default version for development #12177

Merged
merged 14 commits into from
Dec 6, 2024
Merged

Make React 19 the default version for development #12177

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
861f867
Upgrade types. Make react 19 default and alias React 18
jerelmiller Dec 5, 2024
cd1e537
Update jest config with swap of default react version
jerelmiller Dec 5, 2024
c7b9764
Fix reference to createFactory
jerelmiller Dec 5, 2024
fa5a2ed
Install prop-types types package
jerelmiller Dec 5, 2024
3ab5ea3
Use type inference in test
jerelmiller Dec 5, 2024
7156052
Use expect-error and type inference in mutation hoc
jerelmiller Dec 5, 2024
7b0693a
Update testing library libraries to support React 19
jerelmiller Dec 5, 2024
1fb3383
Pass arg to useRef
jerelmiller Dec 5, 2024
707de38
Add expect error to renderHookAsync
jerelmiller Dec 5, 2024
e86d014
Swap testing library patch to 16.1.0
jerelmiller Dec 5, 2024
60fd22a
Add shim for react-dom/client for React 17
jerelmiller Dec 5, 2024
562f157
Clean up Prettier, Size-limit, and Api-Extractor
jerelmiller Dec 5, 2024
782ed67
Fix type error in getDataFromTree
jerelmiller Dec 5, 2024
554b45f
bump `@testing-library/react-render-stream` to 2.0.0
phryneas Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions config/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,17 @@ const standardReact19Config = {
...defaults,
displayName: "ReactDOM 19",
testPathIgnorePatterns: react19TestFileIgnoreList,
moduleNameMapper: {
"^react$": "react-19",
"^react-dom$": "react-dom-19",
"^react-dom/(.*)$": "react-dom-19/$1",
},
};

const standardReact18Config = {
...defaults,
displayName: "ReactDOM 18",
testPathIgnorePatterns: [ignoreTSFiles],
moduleNameMapper: {
"^react$": "react-18",
"^react-dom$": "react-dom-18",
"^react-dom/(.*)$": "react-dom-18/$1",
},
};

const standardReact17Config = {
Expand All @@ -83,6 +83,7 @@ const standardReact17Config = {
moduleNameMapper: {
"^react$": "react-17",
"^react-dom$": "react-dom-17",
"^react-dom/client$": "<rootDir>/../config/jest/react-dom-17-client.js",
"^react-dom/server$": "react-dom-17/server",
"^react-dom/test-utils$": "react-dom-17/test-utils",
},
Expand Down
15 changes: 15 additions & 0 deletions config/jest/react-dom-17-client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Shim for React 17 react-dom/client entrypoint imported by React Testing
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turns out that react-dom/client was imported by RTL in our v17 tests which actually used the v18 import. When upgrading to v19, that import no longer works, presumably because its using the React 19 react-dom/client file, but with React 17 core.

This shim adds an entrypoint for react-dom/client that doesn't exist in 17 to satisfy the import path and avoid using the React 19 version. We throw to ensure the legacyRoot option is set in the tests though, which should be covered by the patch.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very good call!

// Library

module.exports = {
hydrateRoot: () => {
throw new Error(
"Cannot use hydrateRoot with React 17. Ensure this uses legacy root instead"
);
},
createRoot: () => {
throw new Error(
"Cannot use createRoot with React 17. Ensure this uses legacy root instead"
);
},
};
152 changes: 62 additions & 90 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 9 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@
"@size-limit/esbuild-why": "11.1.4",
"@size-limit/preset-small-lib": "11.1.4",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "6.4.6",
"@testing-library/react": "^16.0.1",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "^16.1.0",
"@testing-library/react-render-stream": "2.0.0-alpha.1",
"@testing-library/user-event": "14.5.2",
"@tsconfig/node20": "20.1.4",
Expand All @@ -135,8 +135,9 @@
"@types/lodash": "4.17.7",
"@types/node": "20.16.1",
"@types/node-fetch": "2.6.11",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@types/prop-types": "^15.7.14",
"@types/react": "19.0.0",
"@types/react-dom": "19.0.0",
"@types/relay-runtime": "14.1.24",
"@types/use-sync-external-store": "0.0.6",
"@typescript-eslint/eslint-plugin": "7.18.0",
Expand Down Expand Up @@ -168,12 +169,12 @@
"patch-package": "8.0.0",
"pkg-pr-new": "0.0.24",
"prettier": "3.1.1",
"react": "18.3.1",
"react": "19.0.0",
"react-17": "npm:react@^17",
"react-19": "npm:react@19.0.0",
"react-dom": "18.3.1",
"react-18": "npm:react@^18",
"react-dom": "19.0.0",
"react-dom-17": "npm:react-dom@^17",
"react-dom-19": "npm:react-dom@19.0.0",
"react-dom-18": "npm:react-dom@^18",
"react-error-boundary": "4.0.13",
"recast": "0.23.9",
"resolve": "1.22.8",
Expand Down
0 patches/@testing-library+react+16.0.1.patch → patches/@testing-library+react+16.1.0.patch
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/react/components/__tests__/client/Query.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ describe("Query component", () => {
];

const Component = () => (
<Query query={allPeopleQuery} data-ref={React.useRef()}>
<Query query={allPeopleQuery} data-ref={React.useRef(void 0)}>
{(result: any) => {
if (result.loading) {
return null;
Expand Down
Loading
Loading