feat: add support for react v19

This commit adds support for react v19 and ensures that the unit tests run on both react v18 and
v19.

Author: 100terres

.circleci/config.yml

@@ -49,6 +49,9 @@ jobs:
       - image: cimg/node:22.12.0-browsers
     working_directory: ~/repo
     resource_class: medium+
+    parameters:
+      react-major-version:
+        type: string
     steps:
       - checkout
       - pnpm_setup
@@ -57,6 +60,7 @@ jobs:
           command: pnpm test
           environment:
             JEST_JUNIT_OUTPUT: 'test-reports/junit/js-test-results.xml'
+            REACT_MAJOR_VERSION: << parameters.react-major-version >>
 
       - store_test_results:
           path: test-reports/junit
@@ -139,6 +143,9 @@ workflows:
           requires:
             - install
       - test-unit:
+          matrix:
+            parameters:
+              react-major-version: ['18', '19']
           requires:
             - install
       - test-bundle:

csp-server/environment.d.ts

@@ -1,6 +1,7 @@
 interface ProcessEnv {
-  NODE_ENV?: 'development' | 'production';
   CI?: boolean;
+  NODE_ENV?: 'development' | 'production';
+  REACT_MAJOR_VERSION?: '18' | '19';
 }
 
 interface Process {

jest.config.ts

@@ -2,8 +2,11 @@
 /// <reference path="./test/typings/environment.d.ts" />
 
 import type { Config } from 'jest';
+import getReactMajorVersion from './test/util/get-react-major-version';
 import isRunningInCI from './test/util/is-running-in-ci';
 
+const reactMajorVersion = getReactMajorVersion();
+
 const config: Config = {
   clearMocks: true,
   modulePathIgnorePatterns: ['/dist/'],
@@ -26,6 +29,17 @@ const config: Config = {
   ],
 };
 
+// eslint-disable-next-line no-console
+console.log('Testing with React version:', `${reactMajorVersion}.x.x`);
+
+if (reactMajorVersion === '18') {
+  config.cacheDirectory = `.cache/jest-cache-react-${reactMajorVersion}`;
+  config.moduleNameMapper = {
+    '^react-dom((\\/.*)?)$': `react-dom-${reactMajorVersion}$1`,
+    '^react((\\/.*)?)$': `react-${reactMajorVersion}$1`,
+  };
+}
+
 if (isRunningInCI()) {
   config.maxWorkers = 2;
 }

package.json

@@ -49,6 +49,8 @@
     "release:test": "release-it --dry-run",
     "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=examples-single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
     "test": "jest --config ./jest.config.ts",
+    "test:react-18": "cross-env REACT_MAJOR_VERSION=18 pnpm test",
+    "test:react-19": "cross-env REACT_MAJOR_VERSION=19 pnpm test",
     "test:browser": "cypress open",
     "test:browser:ci": "cypress run",
     "test:coverage": "pnpm test --coverage --coveragePathIgnorePatterns=/debug",
@@ -115,9 +117,9 @@
     "@storybook/react-webpack5": "8.4.7",
     "@storybook/theming": "8.4.7",
     "@swc/core": "1.10.4",
-    "@testing-library/dom": "9.3.4",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "14.3.1",
+    "@testing-library/react": "16.2.0",
     "@types/express": "4.17.21",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.14",
@@ -174,8 +176,10 @@
     "postcss-styled-syntax": "0.7.0",
     "prettier": "3.4.2",
     "raf-stub": "3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-18": "npm:react@18.3.0",
+    "react-dom": "19.0.0",
+    "react-dom-18": "npm:react-dom@18.3.0",
     "react-window": "1.8.11",
     "release-it": "17.11.0",
     "require-from-string": "2.0.2",
@@ -194,8 +198,8 @@
     "webpack": "5.97.1"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "license": "Apache-2.0",
   "jest-junit": {