chore: add warning encouraging react users to update mount function (#23182)

Co-authored-by: Zachary Williams <[email protected]>

Author: lmiller1990

npm/react/package.json

@@ -18,6 +18,7 @@
     "@cypress/mount-utils": "0.0.0-development",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
+    "@types/semver": "7.3.9",
     "@vitejs/plugin-react": "1.3.1",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
@@ -28,6 +29,7 @@
     "react-router-dom": "6.0.0-alpha.1",
     "rollup": "^2.38.5",
     "rollup-plugin-typescript2": "^0.29.0",
+    "semver": "^7.3.2",
     "typescript": "^4.2.3",
     "vite": "3.0.3",
     "vite-plugin-require-transform": "1.0.3"

npm/react/src/mount.ts

@@ -1,6 +1,7 @@
 import { getContainerEl } from '@cypress/mount-utils'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import major from 'semver/functions/major'
 import {
   makeMountFn,
   makeUnmountFn,
@@ -25,6 +26,13 @@ const cleanup = () => {
 }
 
 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 })
+  }
+
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
     render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement, reactDomToUse: typeof ReactDOM) => {