breaking: remove support for react 16 and 17 for component testing and move cypress/react18 upstream into cypress/react [run ci]

Author: AtofStryker

CHANGELOG.md

@@ -5,7 +5,6 @@
 - [`@cypress/eslint-plugin-dev`](https://github.com/cypress-io/cypress/blob/develop/npm/eslint-plugin-dev/CHANGELOG.md)
 - [`@cypress/mount-utils`](https://github.com/cypress-io/cypress/blob/develop/npm/mount-utils/CHANGELOG.md)
 - [`@cypress/react`](https://github.com/cypress-io/cypress/blob/develop/npm/react/CHANGELOG.md)
-- [`@cypress/react18`](https://github.com/cypress-io/cypress/blob/develop/npm/react18/CHANGELOG.md)
 - [`@cypress/svelte`](https://github.com/cypress-io/cypress/blob/develop/npm/svelte/CHANGELOG.md)
 - [`@cypress/vite-dev-server`](https://github.com/cypress-io/cypress/blob/develop/npm/vite-dev-server/CHANGELOG.md)
 - [`@cypress/vue`](https://github.com/cypress-io/cypress/blob/develop/npm/vue/CHANGELOG.md)

CONTRIBUTING.md

@@ -186,7 +186,6 @@ Here is a list of the npm packages in this repository:
  | [grep](./npm/grep)                                       | `@cypress/grep`                     | Filter tests using substring                        |
  | [mount-utils](./npm/mount-utils)                       | `@cypress/mount-utils`             | Common functionality for Vue/React/Angular adapters. |
  | [react](./npm/react)                                   | `@cypress/react`                   | Cypress component testing for React.             |
- | [react18](./npm/react18)                               | `@cypress/react18`                   | Cypress component testing for React 18.           |
  | [schematic](./npm/cypress-schematic)                   | `@cypress/schematic`            | Official Angular Schematic and Builder for the Angular CLI.|
  | [svelte](./npm/svelte)                               | `@cypress/svelte`                   | Cypress component testing for Svelte.           |
  | [vite-dev-server](./npm/vite-dev-server)     | `@cypress/vite-dev-server`    | Vite powered dev server for Component Testing.                  |

cli/.eslintignore

@@ -11,7 +11,6 @@ package.json
 # these are all copied from dist'd builds from the individual libs
 /angular
 /react
-/react18
 /vue
 /svelte
 /mount-utils

cli/package.json

@@ -71,7 +71,6 @@
     "@cypress/grep": "0.0.0-development",
     "@cypress/mount-utils": "0.0.0-development",
     "@cypress/react": "0.0.0-development",
-    "@cypress/react18": "0.0.0-development",
     "@cypress/sinon-chai": "2.9.1",
     "@cypress/svelte": "0.0.0-development",
     "@cypress/vue": "0.0.0-development",
@@ -114,7 +113,6 @@
     "mount-utils",
     "vue",
     "react",
-    "react18",
     "angular",
     "svelte"
   ],
@@ -145,11 +143,6 @@
       "import": "./react/dist/cypress-react.esm-bundler.js",
       "require": "./react/dist/cypress-react.cjs.js"
     },
-    "./react18": {
-      "types": "./react18/dist/index.d.ts",
-      "import": "./react18/dist/cypress-react.esm-bundler.js",
-      "require": "./react18/dist/cypress-react.cjs.js"
-    },
     "./mount-utils": {
       "types": "./mount-utils/dist/index.d.ts",
       "require": "./mount-utils/dist/index.js"

cli/scripts/post-build.js

@@ -9,7 +9,6 @@ shell.set('-e') // any error is fatal
 const npmModulesToCopy = [
   'mount-utils',
   'react',
-  'react18',
   'vue',
   'angular',
   'svelte',

npm/react/package.json

@@ -17,25 +17,26 @@
   },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
-    "@types/semver": "7.5.0",
-    "@vitejs/plugin-react": "4.3.0",
-    "axios": "0.21.2",
+    "@types/semver": "7.5.8",
+    "@vitejs/plugin-react": "4.3.3",
+    "axios": "1.7.7",
     "cypress": "0.0.0-development",
-    "prop-types": "15.7.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router": "6.10.0",
-    "react-router-dom": "6.10.0",
+    "prop-types": "15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router": "6.28.0",
+    "react-router-dom": "6.28.0",
     "semver": "^7.5.3",
     "typescript": "~5.4.5",
-    "vite": "5.2.11",
+    "vite": "5.4.10",
     "vite-plugin-require-transform": "1.0.12"
   },
   "peerDependencies": {
-    "@types/react": "^16.9.16 || ^17.0.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "cypress": "*",
-    "react": "^=16.x || ^=17.x",
-    "react-dom": "^=16.x || ^=17.x"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "files": [
     "dist"
@@ -90,9 +91,6 @@
   "nx": {
     "targets": {
       "build": {
-        "dependsOn": [
-          "!@cypress/react18:build"
-        ],
         "outputs": [
           "{workspaceRoot}/cli/react",
           "{projectRoot}/dist"

npm/react/src/mount.ts

@@ -1,23 +1,23 @@
-import { getContainerEl } from '@cypress/mount-utils'
 import React from 'react'
-import ReactDOM from 'react-dom'
-import major from 'semver/functions/major'
+import ReactDOM from 'react-dom/client'
+import { getContainerEl } from '@cypress/mount-utils'
 import {
   makeMountFn,
   makeUnmountFn,
-} from './createMount'
+} from './index'
 import type {
   MountOptions,
   InternalMountOptions,
-} from './types'
+  UnmountArgs,
+} from './index'
 
-let lastReactDom: typeof ReactDOM
+let root: ReactDOM.Root | null
 
 const cleanup = () => {
-  if (lastReactDom) {
-    const root = getContainerEl()
+  if (root) {
+    root.unmount()
 
-    lastReactDom.unmountComponentAtNode(root)
+    root = null
 
     return true
   }
@@ -27,10 +27,10 @@ const cleanup = () => {
 
 /**
  * Mounts a React component into the DOM.
- * @param jsx {React.ReactNode} The React component to mount.
- * @param options {MountOptions} [options={}] options to pass to the mount function.
- * @param rerenderKey {string} [rerenderKey] A key to use to force a rerender.
- * @see {@link https://on.cypress.io/mounting-react} for more details.
+ * @param {import('react').JSX.Element} jsx The React component to mount.
+ * @param {MountOptions} options Options to pass to the mount function.
+ * @param {string} rerenderKey A key to use to force a rerender.
+ *
  * @example
  * import { mount } from '@cypress/react'
  * import { Stepper } from './Stepper'
@@ -40,24 +40,24 @@ const cleanup = () => {
  *   cy.get('[data-cy=increment]').click()
  *   cy.get('[data-cy=counter]').should('have.text', '1')
  * }
+ *
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
+ *
+ * @returns {Cypress.Chainable<MountReturn>} The mounted component.
  */
 export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
-  if (major(React.version) === 18) {
-    const message = '[cypress/react]: You are using `cypress/react`, which is designed for React <= 17. Consider changing to `cypress/react18`, which is designed for React 18.'
-
-    console.error(message)
-    Cypress.log({ name: 'warning', message })
-  }
-
   // Remove last mounted component if cy.mount is called more than once in a test
+  // React by default removes the last component when calling render, but we should remove the root
+  // to wipe away any state
   cleanup()
-
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
-    render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement, reactDomToUse: typeof ReactDOM) => {
-      lastReactDom = (reactDomToUse || ReactDOM)
+    render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement) => {
+      if (!root) {
+        root = ReactDOM.createRoot(el)
+      }
 
-      return lastReactDom.render(reactComponent, el)
+      return root.render(reactComponent)
     },
     unmount: internalUnmount,
     cleanup,
@@ -66,20 +66,14 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
   return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
 }
 
-/**
- * Unmounts the component from the DOM.
- * @internal
- * @param options - Options for unmounting.
- */
 function internalUnmount (options = { log: true }) {
   return makeUnmountFn(options)
 }
-
 /**
  * Removed as of Cypress 11.0.0.
  * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
-export function unmount (options = { log: true }) {
+export function unmount (options: UnmountArgs = { log: true }) {
   // @ts-expect-error - undocumented API
   Cypress.utils.throwErrByPath('mount.unmount')
 }

npm/react/src/types.ts

@@ -8,7 +8,7 @@ export interface UnmountArgs {
 export type MountOptions = Partial<MountReactComponentOptions>
 
 export interface MountReactComponentOptions {
-  ReactDom: typeof import('react-dom')
+  ReactDom: typeof import('react-dom/client')
   /**
    * Log the mounting command into Cypress Command Log,
    * true by default.
@@ -22,11 +22,11 @@ export interface MountReactComponentOptions {
 }
 
 export interface InternalMountOptions {
-  reactDom: typeof import('react-dom')
+  reactDom: typeof import('react-dom/client')
   render: (
     reactComponent: ReturnType<typeof React.createElement>,
     el: HTMLElement,
-    reactDomToUse: typeof import('react-dom')
+    reactDomToUse: typeof import('react-dom/client')
   ) => void
   unmount: (options: UnmountArgs) => void
   cleanup: () => boolean