Upgrade to React v19

Author: colinrotherham

package.json

@@ -84,15 +84,16 @@
     "@storybook/react": "^8.0.5",
     "@storybook/react-vite": "^8.0.5",
     "@storybook/theming": "^8.0.5",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.3.0",
     "@types/eslint": "^9.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash": "^4.17.20",
     "@types/node": "^24.6.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "babel-jest": "^30.2.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-replace-import-extension": "^1.1.5",
@@ -112,8 +113,8 @@
     "nhsuk-frontend": "^10.0.0",
     "outdent": "^0.8.0",
     "prettier": "^3.6.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "rollup": "^4.52.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "sass": "^1.53.0",

src/components/form-elements/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap

@@ -44,7 +44,6 @@ exports[`DateInput matches snapshot (via server): client 1`] = `
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -67,7 +66,6 @@ exports[`DateInput matches snapshot (via server): client 1`] = `
               inputmode="numeric"
               name="date-input-month"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -90,7 +88,6 @@ exports[`DateInput matches snapshot (via server): client 1`] = `
               inputmode="numeric"
               name="date-input-year"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -241,7 +238,6 @@ exports[`DateInput matches snapshot 1`] = `
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -264,7 +260,6 @@ exports[`DateInput matches snapshot 1`] = `
               inputmode="numeric"
               name="date-input-month"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -287,7 +282,6 @@ exports[`DateInput matches snapshot 1`] = `
               inputmode="numeric"
               name="date-input-year"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -453,7 +447,6 @@ exports[`DateInput matches snapshot with custom date fields and error message 1`
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -565,7 +558,6 @@ exports[`DateInput matches snapshot with error message 1`] = `
               inputmode="numeric"
               name="date-input-day"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -588,7 +580,6 @@ exports[`DateInput matches snapshot with error message 1`] = `
               inputmode="numeric"
               name="date-input-month"
               type="text"
-              value=""
             />
           </div>
         </div>
@@ -611,7 +602,6 @@ exports[`DateInput matches snapshot with error message 1`] = `
               inputmode="numeric"
               name="date-input-year"
               type="text"
-              value=""
             />
           </div>
         </div>

src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap

@@ -148,6 +148,11 @@ exports[`Card Care card variant urgent matches the snapshot 1`] = `
 
 exports[`Card matches snapshot (via server): client 1`] = `
 <div>
+  <link
+    as="image"
+    href="imageSrc"
+    rel="preload"
+  />
   <div
     class="nhsuk-card"
   >
@@ -187,6 +192,11 @@ exports[`Card matches snapshot (via server): client 1`] = `
 
 exports[`Card matches snapshot (via server): server 1`] = `
 <div>
+  <link
+    as="image"
+    href="imageSrc"
+    rel="preload"
+  />
   <div
     class="nhsuk-card"
   >

src/util/components/index.ts

@@ -1,5 +1,5 @@
-import { act, render, type RenderOptions as ClientOptions } from '@testing-library/react';
-import { type JSX } from 'react';
+import { render, type RenderOptions as ClientOptions } from '@testing-library/react';
+import { act, type JSX } from 'react';
 import { renderToString, type ServerOptions } from 'react-dom/server';
 
 type RenderOptions =

yarn.lock

@@ -4814,7 +4814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^10.0.0":
+"@testing-library/dom@npm:^10.4.1":
   version: 10.4.1
   resolution: "@testing-library/dom@npm:10.4.1"
   dependencies:
@@ -4844,21 +4844,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^15.0.7":
-  version: 15.0.7
-  resolution: "@testing-library/react@npm:15.0.7"
+"@testing-library/react@npm:^16.3.0":
+  version: 16.3.0
+  resolution: "@testing-library/react@npm:16.3.0"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
-    "@testing-library/dom": "npm:^10.0.0"
-    "@types/react-dom": "npm:^18.0.0"
   peerDependencies:
-    "@types/react": ^18.0.0
-    react: ^18.0.0
-    react-dom: ^18.0.0
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/ac8ee8968e81949ecb35f7ee34741c2c043f73dd7fee2247d56f6de6a30de4742af94f25264356863974e54387485b46c9448ecf3f6ca41cf4339011c369f2d4
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/3a2cb1f87c9a67e1ebbbcfd99b94b01e496fc35147be8bc5d8bf07a699c7d523a09d57ef2f7b1d91afccd1a28e21eda3b00d80187fbb51b1de01e422592d845e
   languageName: node
   linkType: hard
 
@@ -5254,12 +5256,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.3.1":
-  version: 18.3.7
-  resolution: "@types/react-dom@npm:18.3.7"
+"@types/react-dom@npm:^19.2.0":
+  version: 19.2.0
+  resolution: "@types/react-dom@npm:19.2.0"
   peerDependencies:
-    "@types/react": ^18.0.0
-  checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e
+    "@types/react": ^19.2.0
+  checksum: 10c0/73ba326c8bc53e7bb597aa8e66ce4aabd79e501f744e1386278f0c63f1be6d78cca71a8269af3565206f296675116109a3ccbed4038409614fabf8405e54c6ef
   languageName: node
   linkType: hard
 
@@ -5273,13 +5275,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.3.12":
-  version: 18.3.25
-  resolution: "@types/react@npm:18.3.25"
+"@types/react@npm:^19.2.0":
+  version: 19.2.0
+  resolution: "@types/react@npm:19.2.0"
   dependencies:
-    "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/ef4fad7c845ce44cb454e47e826d1b04ff5081bccdac06d0260fc6e47de730268f8f9ff2ffc5085ee793d7466493c1175b2309b3d71c20916efefac0fd7612f1
+  checksum: 10c0/a280e146df2abd3b06eaa2f5332dade9f7ebe916334a40699ee11139c5f22aeb49b5b78b6de8c55b53ef2fa94285e1bc2feaf4fbce6fe259a7de92dc1bf67b17
   languageName: node
   linkType: hard
 
@@ -11606,15 +11607,16 @@ __metadata:
     "@storybook/react": "npm:^8.0.5"
     "@storybook/react-vite": "npm:^8.0.5"
     "@storybook/theming": "npm:^8.0.5"
+    "@testing-library/dom": "npm:^10.4.1"
     "@testing-library/jest-dom": "npm:^6.9.1"
-    "@testing-library/react": "npm:^15.0.7"
+    "@testing-library/react": "npm:^16.3.0"
     "@types/eslint": "npm:^9.6.1"
     "@types/jest": "npm:^30.0.0"
     "@types/jest-axe": "npm:^3.5.9"
     "@types/lodash": "npm:^4.17.20"
     "@types/node": "npm:^24.6.2"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
+    "@types/react": "npm:^19.2.0"
+    "@types/react-dom": "npm:^19.2.0"
     babel-jest: "npm:^30.2.0"
     babel-plugin-module-resolver: "npm:^5.0.2"
     babel-plugin-replace-import-extension: "npm:^1.1.5"
@@ -11634,8 +11636,8 @@ __metadata:
     nhsuk-frontend: "npm:^10.0.0"
     outdent: "npm:^0.8.0"
     prettier: "npm:^3.6.2"
-    react: "npm:^18.2.0"
-    react-dom: "npm:^18.2.0"
+    react: "npm:^19.2.0"
+    react-dom: "npm:^19.2.0"
     rollup: "npm:^4.52.4"
     rollup-plugin-preserve-directives: "npm:^0.4.0"
     sass: "npm:^1.53.0"
@@ -11648,8 +11650,8 @@ __metadata:
   peerDependencies:
     classnames: ">=2.5.0"
     nhsuk-frontend: ">=10.0.0 <11.0.0"
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
+    react: ">=18.2.0"
+    react-dom: ">=18.2.0"
     tslib: ">=2.8.0"
   languageName: unknown
   linkType: soft
@@ -12607,7 +12609,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
   dependencies:
@@ -12619,6 +12621,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^19.2.0":
+  version: 19.2.0
+  resolution: "react-dom@npm:19.2.0"
+  dependencies:
+    scheduler: "npm:^0.27.0"
+  peerDependencies:
+    react: ^19.2.0
+  checksum: 10c0/fa2cae05248d01288e91523b590ce4e7635b1e13f1344e225f850d722a8da037bf0782f63b1c1d46353334e0c696909b82e582f8cad607948fde6f7646cc18d9
+  languageName: node
+  linkType: hard
+
 "react-element-to-jsx-string@npm:^15.0.0":
   version: 15.0.0
   resolution: "react-element-to-jsx-string@npm:15.0.0"
@@ -12668,7 +12681,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0":
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
   dependencies:
@@ -12677,6 +12690,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^19.2.0":
+  version: 19.2.0
+  resolution: "react@npm:19.2.0"
+  checksum: 10c0/1b6d64eacb9324725bfe1e7860cb7a6b8a34bc89a482920765ebff5c10578eb487e6b46b2f0df263bd27a25edbdae2c45e5ea5d81ae61404301c1a7192c38330
+  languageName: node
+  linkType: hard
+
 "read-pkg-up@npm:^7.0.1":
   version: 7.0.1
   resolution: "read-pkg-up@npm:7.0.1"
@@ -13325,6 +13345,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"