wip: setup unit test to run with 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",
@@ -175,7 +177,9 @@
     "prettier": "3.4.2",
     "raf-stub": "3.0.0",
     "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",

pnpm-lock.yaml

@@ -48,5 +48,11 @@
       rangeStrategy: "widen",
       commitMessagePrefix: "chore(peer-deps):",
     },
+    
+    // to support previous react version
+    {
+      "matchPackageNames": ["react-18", "react-dom-18"],
+      "allowedVersions": "<19.0.0",
+    },
   ],
 }

renovate.json5

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

test/typings/environment.d.ts

@@ -0,0 +1,3 @@
+export default function getReactMajorVersion(): '18' | '19' {
+  return process.env.REACT_MAJOR_VERSION || '19';
+}