From 32118f1518e806120d88f3cc1ede9cc55e24cbc0 Mon Sep 17 00:00:00 2001 From: Gabriel Santerre Date: Wed, 22 Jan 2025 14:34:48 -0500 Subject: [PATCH] wip: setup unit test to run with react v18 and v19 --- .circleci/config.yml | 7 +++++++ csp-server/environment.d.ts | 3 ++- jest.config.ts | 14 ++++++++++++++ package.json | 4 ++++ pnpm-lock.yaml | 25 +++++++++++++++++++++++++ renovate.json5 | 6 ++++++ test/typings/environment.d.ts | 3 ++- test/util/get-react-major-version.ts | 3 +++ 8 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 test/util/get-react-major-version.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 71b4e8edb..d138b4052 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/csp-server/environment.d.ts b/csp-server/environment.d.ts index ed5e44e28..a01be1e78 100644 --- a/csp-server/environment.d.ts +++ b/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 { diff --git a/jest.config.ts b/jest.config.ts index 18ffbe16e..78fcf947f 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -2,8 +2,11 @@ /// 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; } diff --git a/package.json b/package.json index f4182b0ac..90aea35a0 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec9a133ca..fee2028f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -315,9 +315,15 @@ importers: react: specifier: 19.0.0 version: 19.0.0 + react-18: + specifier: npm:react@18.3.0 + version: react@18.3.0 react-dom: specifier: 19.0.0 version: 19.0.0(react@19.0.0) + react-dom-18: + specifier: npm:react-dom@18.3.0 + version: react-dom@18.3.0(react@19.0.0) react-window: specifier: 1.8.11 version: 1.8.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -6334,6 +6340,11 @@ packages: resolution: {integrity: sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==} engines: {node: '>=16.14.0'} + react-dom@18.3.0: + resolution: {integrity: sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==} + peerDependencies: + react: ^18.3.0 + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -6382,6 +6393,10 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react@18.3.0: + resolution: {integrity: sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==} + engines: {node: '>=0.10.0'} + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -14814,6 +14829,12 @@ snapshots: transitivePeerDependencies: - supports-color + react-dom@18.3.0(react@19.0.0): + dependencies: + loose-envify: 1.4.0 + react: 19.0.0 + scheduler: 0.23.2 + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -14854,6 +14875,10 @@ snapshots: react: 19.0.0 react-dom: 19.0.0(react@19.0.0) + react@18.3.0: + dependencies: + loose-envify: 1.4.0 + react@18.3.1: dependencies: loose-envify: 1.4.0 diff --git a/renovate.json5 b/renovate.json5 index 48e177e4b..76bf498b3 100644 --- a/renovate.json5 +++ b/renovate.json5 @@ -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", + }, ], } diff --git a/test/typings/environment.d.ts b/test/typings/environment.d.ts index ed5e44e28..a01be1e78 100644 --- a/test/typings/environment.d.ts +++ b/test/typings/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 { diff --git a/test/util/get-react-major-version.ts b/test/util/get-react-major-version.ts new file mode 100644 index 000000000..3532be833 --- /dev/null +++ b/test/util/get-react-major-version.ts @@ -0,0 +1,3 @@ +export default function getReactMajorVersion(): '18' | '19' { + return process.env.REACT_MAJOR_VERSION || '19'; +}