Make React 19 the default version for development (#12177)

Co-authored-by: jerelmiller <[email protected]>
Co-authored-by: Lenz Weber-Tronic <[email protected]>

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 41613,
+  "dist/apollo-client.min.cjs": 41615,
   "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 34349
 }

config/jest.config.js

@@ -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 = {
@@ -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",
   },

config/jest/react-dom-17-client.js

@@ -0,0 +1,15 @@
+// Shim for React 17 react-dom/client entrypoint imported by React Testing
+// 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"
+    );
+  },
+};

package.json

@@ -122,9 +122,9 @@
     "@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/react-render-stream": "2.0.0-alpha.1",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/react-render-stream": "2.0.0",
     "@testing-library/user-event": "14.5.2",
     "@tsconfig/node20": "20.1.4",
     "@types/bytes": "3.1.4",
@@ -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",
@@ -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",

src/react/components/__tests__/client/Query.test.tsx

@@ -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;