feat: support react 19 for component testing with cypress/react [run ci]

cypress-io · Nov 19, 2024 · f6b67a2 · f6b67a2
1 parent 37ea320
commit f6b67a2
Show file tree

Hide file tree

Showing 11 changed files with 2,899 additions and 10 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -34,6 +34,10 @@ _Released 12/3/2024 (PENDING)_
 - The `resourceType` option on `cy.intercept` has been deprecated. We anticipate the resource types to change or be completely removed in the future. Our intention is to replace essential functionality dependent on the `resourceType` within Cypress in a future version (like hiding network logs that are not fetch/xhr). Please leave feedback on any essential uses of `resourceType`
 in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addresses [#30433](https://github.com/cypress-io/cypress/issues/30433).
 
+**Features:**
+
+- Cypress Component Testing now supports `React` version 19. Cypress will allow detected use of the React 19 Release Candidate until React 19 is officially released. Addresses [#29470](https://github.com/cypress-io/cypress/issues/29470).
+
 **Bugfixes:**
 
 - Elements with `display: contents` will no longer use box model calculations for visibility, and correctly show as visible when it is visible. Fixed in [#29680](https://github.com/cypress-io/cypress/pull/29680). Fixes [#29605](https://github.com/cypress-io/cypress/issues/29605).

diff --git a/npm/react/package.json b/npm/react/package.json
@@ -32,11 +32,11 @@
     "vite-plugin-require-transform": "1.0.12"
   },
   "peerDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
     "cypress": "*",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "files": [
     "dist"

diff --git a/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts b/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts
@@ -51,8 +51,7 @@ function loadErrorSpec (options: Options): VerifyFunc {
   return createVerify({ fileName: Cypress._.last(filePath.split('/')), hasPreferredIde: false, mode: 'component' })
 }
 
-// keeping structure as to easily adapt for future versions of react
-const reactVersions = [18] as const
+const reactVersions = [18, 19] as const
 
 reactVersions.forEach((reactVersion) => {
   describe(`React ${reactVersion}`, {

diff --git a/packages/scaffold-config/src/dependencies.ts b/packages/scaffold-config/src/dependencies.ts
@@ -22,7 +22,7 @@ export const WIZARD_DEPENDENCY_REACT = {
   package: 'react',
   installer: 'react',
   description: 'A JavaScript library for building user interfaces',
-  minVersion: '^18.0.0',
+  minVersion: '^18.0.0 || ^19.0.0-rc || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_REACT_DOM = {
@@ -31,7 +31,7 @@ export const WIZARD_DEPENDENCY_REACT_DOM = {
   package: 'react-dom',
   installer: 'react-dom',
   description: 'This package serves as the entry point to the DOM and server renderers for React',
-  minVersion: '^18.0.0',
+  minVersion: '^18.0.0 || ^19.0.0-rc || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_TYPESCRIPT = {

diff --git a/system-tests/__snapshots__/component_testing_spec.ts.js b/system-tests/__snapshots__/component_testing_spec.ts.js
diff --git a/system-tests/projects/react19/cypress/support/backgroundColor.css b/system-tests/projects/react19/cypress/support/backgroundColor.css
@@ -0,0 +1,3 @@
+.sample-bg {
+  background: rgb(255, 0, 0);
+}
diff --git a/system-tests/projects/react19/cypress/support/component.js b/system-tests/projects/react19/cypress/support/component.js
@@ -0,0 +1,5 @@
+import { mount } from 'cypress/react'
+
+import './backgroundColor.css'
+
+Cypress.Commands.add('mount', mount)
diff --git a/system-tests/projects/react19/package.json b/system-tests/projects/react19/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "react19",
+  "version": "0.0.0-test",
+  "dependencies": {
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "babel-loader": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "vite": "^5.4.10",
+    "webpack": "^5.96.1",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "sideEffects": false,
+  "projectFixtureDirectory": "react"
+}
diff --git a/system-tests/projects/react19/vite.config.ts b/system-tests/projects/react19/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/system-tests/projects/react19/yarn.lock b/system-tests/projects/react19/yarn.lock
diff --git a/system-tests/test/component_testing_spec.ts b/system-tests/test/component_testing_spec.ts
@@ -36,8 +36,7 @@ describe('component testing projects', function () {
   })
 })
 
-// keeping structure as to adapt to future versions of react
-const REACT_MAJOR_VERSIONS = ['18'] as const
+const REACT_MAJOR_VERSIONS = ['18', '19'] as const
 
 describe(`React major versions with Vite`, function () {
   systemTests.setup()