breaking: remove support for React 16 and 17 for Cypress Component Testing. Additionally, remove the cypress/react18 testing harness and merge it upstream with cypress/react (#30590)

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

* update tests / suggestions from code review [run ci]

Author: AtofStryker

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-11-07-24-vue-cli-service-removal
+11-07-24-react-16-17-removal

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'breaking/remove_vue_cli_service'
+        - 'breaking/remove_react_16_17_merge_react18_harness_upstream'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -42,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'breaking/remove_vue_cli_service', << pipeline.git.branch >> ]
+    - equal: [ 'breaking/remove_react_16_17_merge_react18_harness_upstream', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'breaking/remove_vue_cli_service', << pipeline.git.branch >> ]
+    - equal: [ 'breaking/remove_react_16_17_merge_react18_harness_upstream', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -76,7 +76,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'breaking/remove_vue_cli_service', << pipeline.git.branch >> ]
+    - equal: [ 'breaking/remove_react_16_17_merge_react18_harness_upstream', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +152,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "breaking/remove_vue_cli_service" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "breaking/remove_react_16_17_merge_react18_harness_upstream" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

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/CHANGELOG.md

@@ -17,11 +17,13 @@ _Released 12/3/2024 (PENDING)_
 - It is no longer possible to make a `fetch` or `XMLHttpRequest` request from the `about:blank` page in Electron (i.e. `cy.window().then((win) => win.fetch('<some-url>')`). You must use `cy.request` instead or perform some form of initial navigation via `cy.visit()`. Addressed in [#29547](https://github.com/cypress-io/cypress/pull/30394).
 - `@cypress/webpack-dev-server` no longer supports `webpack-dev-server` version 3. Additionally, `@cypress/webpack-dev-server` now ships with `webpack-dev-server` version 5 by default. `webpack-dev-server` version 4 will need to be installed along side Cypress if you are still using `webpack` version 4. Addresses [#29308](https://github.com/cypress-io/cypress/issues/29308), [#30347](https://github.com/cypress-io/cypress/issues/30347), and [#30141](https://github.com/cypress-io/cypress/issues/30141).
 - `@cypress/vite-dev-server` no longer supports `vite` versions 2 and 3. Addresses [#29377](https://github.com/cypress-io/cypress/issues/29377) and [#29378](https://github.com/cypress-io/cypress/issues/29378).
-- Cypress Component Testing no longer supports `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
-- Cypress Component Testing no longer supports `Vue` version 2. Addresses [#30295](https://github.com/cypress-io/cypress/issues/30295).
+- Cypress Component Testing no longer supports `React` versions 16 and 17. Addresses [#29607](https://github.com/cypress-io/cypress/issues/29607).
 - Cypress Component Testing no longer supports `Next.js` versions 10, 11, 12, and 13. Addresses [#29583](https://github.com/cypress-io/cypress/issues/29583).
+- Cypress Component Testing no longer supports `Vue` version 2. Addresses [#30295](https://github.com/cypress-io/cypress/issues/30295).
+- Cypress Component Testing no longer supports `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
 - Cypress Component Testing no longer supports `Angular` versions 13, 14, 15, and 16. The minimum supported version is now `17.2.0` in order to fully support Angular [signals](https://angular.dev/guide/signals). Addresses [#29582](https://github.com/cypress-io/cypress/issues/29582). Addressed in [#30539](https://github.com/cypress-io/cypress/pull/30539).
 - Cypress Component Testing no longer supports `Svelte` version 3. Addresses [#30492](https://github.com/cypress-io/cypress/issues/30492).
+- The `cypress/react18` test harness is no longer included in the Cypress binary. Instead, React 18 support is now shipped with `cypress/react`! Addresses [#29607](https://github.com/cypress-io/cypress/issues/29607).
 - The `cypress/angular-signals` test harness is no longer included in the Cypress binary. Instead, signals support is now shipped with `cypress/angular`! This requires `rxjs` to be installed as a `peerDependency`. Addresses [#29606](https://github.com/cypress-io/cypress/issues/29606).
 - Cypress Component Testing no longer supports `create-react-app`. Addresses [#30028](https://github.com/cypress-io/cypress/issues/30028).
 - Cypress Component Testing no longer supports `@vue/cli-service`. Addresses [#30481](https://github.com/cypress-io/cypress/issues/30481).

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/cypress/component/advanced/app-action-example/counter.cy.jsx

@@ -20,15 +20,13 @@ describe('Counter with access', () => {
     // the window.counter was set from the Counter's constructor
     cy.window()
     .should('have.property', 'counter')
-    .its('state')
-    .should('deep.equal', { count: 0 })
+    .its('count')
+    .should('equal', 0)
 
     // let's change the state of the component
     cy.window()
     .its('counter')
-    .invoke('setState', {
-      count: 101,
-    })
+    .invoke('setCount', 101)
 
     // the UI should update to reflect the new count
     cy.contains('count: 101').should('be.visible')

npm/react/cypress/component/advanced/app-action-example/counter.jsx

@@ -1,34 +1,28 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-export class Counter extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      count: 0,
-    }
+export function Counter () {
+  const [count, setCount] = useState(0)
 
-    if (window.Cypress) {
-      // if this component is mounted from inside Cypress Test Runner
-      // then expose the reference to this instance
-      // to allow controlling it from tests
-      console.log(
-        'set window.counter to this component in window',
-        window.location.pathname,
-      )
+  if (window.Cypress) {
+    // if this component is mounted from inside Cypress Test Runner
+    // then expose the reference to this instance
+    // to allow controlling it from tests
+    console.log(
+      'set window.counter to this component in window',
+      window.location.pathname,
+    )
 
-      window.counter = this
-    } else {
-      console.log('running outside Cypress')
+    window.counter = {
+      count,
+      setCount,
     }
+  } else {
+    console.log('running outside Cypress')
   }
 
-  click = () => {
-    this.setState({
-      count: this.state.count + 1,
-    })
+  function click () {
+    setCount(count + 1)
   }
 
-  render () {
-    return <p onClick={this.click}>count: {this.state.count}</p>
-  }
+  return <p onClick={click}>count: {count}</p>
 }

npm/react/cypress/component/advanced/context/App.jsx

@@ -2,15 +2,13 @@ import React from 'react'
 import { ThemeContext } from './context'
 import { Toolbar } from './Toolbar.jsx'
 
-export default class App extends React.Component {
-  render () {
-    // Use a Provider to pass the current theme to the tree below.
-    // Any component can read it, no matter how deep it is.
-    // In this example, we're passing "dark" as the current value.
-    return (
-      <ThemeContext.Provider value="dark">
-        <Toolbar />
-      </ThemeContext.Provider>
-    )
-  }
+export default function App () {
+  // Use a Provider to pass the current theme to the tree below.
+  // Any component can read it, no matter how deep it is.
+  // In this example, we're passing "dark" as the current value.
+  return (
+    <ThemeContext.Provider value="dark">
+      <Toolbar />
+    </ThemeContext.Provider>
+  )
 }

npm/react/cypress/component/advanced/hooks/counter2-with-hooks.jsx

@@ -6,7 +6,7 @@ export default function Counter2WithHooks () {
 
   useEffect(() => {
     document.title = `You clicked ${count} times`
-  })
+  }, [count])
 
   return (
     <div>

npm/react/cypress/component/advanced/mocking-axios/1-users.jsx

@@ -1,36 +1,28 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 // import the entire axios module
 // later we can use axios.get to make requests
 import axios from 'axios'
 
-export class Users extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      users: [],
-    }
-  }
+export function Users () {
+  const [users, setUsers] = useState([])
 
-  componentDidMount () {
-    axios
-    .get('https://jsonplaceholder.cypress.io/users?_limit=3')
-    .then((response) => {
-      // JSON responses are automatically parsed.
-      this.setState({
-        users: response.data,
-      })
-    })
-  }
+  const getUsers = async () => {
+    const response = await axios.get('https://jsonplaceholder.cypress.io/users?_limit=3')
 
-  render () {
-    return (
-      <div>
-        {this.state.users.map((user) => (
-          <li key={user.id}>
-            <strong>{user.id}</strong> - {user.name}
-          </li>
-        ))}
-      </div>
-    )
+    setUsers(response.data)
   }
+
+  useEffect(() => {
+    getUsers()
+  }, [])
+
+  return (
+    <div>
+      {users.map((user) => (
+        <li key={user.id}>
+          <strong>{user.id}</strong> - {user.name}
+        </li>
+      ))}
+    </div>
+  )
 }

npm/react/cypress/component/advanced/mocking-axios/3-users-api.cy.jsx renamed to npm/react/cypress/component/advanced/mocking-axios/2-users-api.cy.jsx

@@ -1,8 +1,8 @@
 /// <reference types="cypress" />
 import React from 'react'
 import { mount } from '@cypress/react'
-import { Users } from './3-users-api.jsx'
-import * as axios from './axios-api'
+import { Users } from './2-users-api.jsx'
+import * as axios from './axios-api.jsx'
 
 describe('Mocking wrapped Axios', () => {
   it('shows real users', () => {

npm/react/cypress/component/advanced/mocking-axios/2-users-api.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react'
+// import wrapped Axios method
+import axiosApi from './axios-api.jsx'
+
+export function Users () {
+  const [users, setUsers] = useState([])
+
+  const getUsers = async () => {
+    console.log({ axiosApi })
+    const response = await axiosApi.get('https://jsonplaceholder.cypress.io/users?_limit=3')
+
+    setUsers(response.data)
+  }
+
+  useEffect(() => {
+    getUsers()
+  }, [])
+
+  return (
+    <div>
+      {users.map((user) => (
+        <li key={user.id}>
+          <strong>{user.id}</strong> - {user.name}
+        </li>
+      ))}
+    </div>
+  )
+}