Merge branch 'release/14.0.0' of github.com:cypress-io/cypress into f…

…eat/make_JIT_compile_GA
cypress-io · Nov 21, 2024 · 2ab1a66 · 2ab1a66 · cypress-bot · Nov 21, 2024
2 parents 4cb7966 + 94d360e
commit 2ab1a66
Show file tree

Hide file tree

Showing 13 changed files with 2,905 additions and 12 deletions.
diff --git a/.circleci/cache-version.txt b/.circleci/cache-version.txt
@@ -1,3 +1,7 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
+<<<<<<< HEAD
 11-18-24-jit
+=======
+11-19-24-react-19
+>>>>>>> 94d360e8ae4dbffee03121c1d74c8c577ebaa1e2
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -37,6 +37,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/launchpad/cypress/e2e/config-warning.cy.ts b/packages/launchpad/cypress/e2e/config-warning.cy.ts
@@ -203,8 +203,8 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
     .should('contain.text', 'vite. Expected ^4.0.0 || ^5.0.0, found 3.2.11')
-    .should('contain.text', 'react. Expected ^18.0.0, found 15.6.2.')
-    .should('contain.text', 'react-dom. Expected ^18.0.0 but dependency was not found.')
+    .should('contain.text', 'react. Expected ^18.0.0 || ^19.0.0-rc || ^19.0.0, found 15.6.2.')
+    .should('contain.text', 'react-dom. Expected ^18.0.0 || ^19.0.0-rc || ^19.0.0 but dependency was not found.')
 
     cy.get('.warning-markdown').find('li').should('have.length', 3)
   })

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()],
+})