feat: support React 18

circle.yml

@@ -27,7 +27,7 @@ mainBuildFilters: &mainBuildFilters
     branches:
       only:
         - develop
-        - issue-22147-nohoist
+        - lmiller/21381-react-18-with-ignore
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -39,7 +39,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ linux-arm64, << pipeline.git.branch >> ]
     - equal: [ 'tbiethman/UNIFY-1816-prototype', << pipeline.git.branch >> ]
     - matches:
-          pattern: "-release$"
+          pattern: "lmiller/21381-react-18-with-ignore"
           value: << pipeline.git.branch >>
 
 linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
@@ -129,7 +129,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "tbiethman/UNIFY-1816-prototype" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "lmiller/21381-react-18-with-ignore" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

npm/react/package.json

@@ -15,7 +15,8 @@
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "dependencies": {
-    "debug": "^4.3.2"
+    "debug": "^4.3.2",
+    "semver": "7.3.2"
   },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
@@ -37,10 +38,10 @@
     "vite-plugin-require-transform": "1.0.3"
   },
   "peerDependencies": {
-    "@types/react": "^16.9.16 || ^17.0.0",
+    "@types/react": "^16.9.16 || ^17.0.0 || ^18.0.0",
     "cypress": "*",
-    "react": "^=16.x || ^=17.x",
-    "react-dom": "^=16.x || ^=17.x"
+    "react": "^=16.x || ^=17.x || ^=18.x",
+    "react-dom": "^=16.x || ^=17.x || ^=18"
   },
   "files": [
     "dist"

npm/react/rollup.config.js

@@ -24,6 +24,7 @@ function createEntry (options) {
     external: [
       'react',
       'react-dom',
+      'react-dom/client',
     ],
     plugins: [
       resolve(), commonjs(),
@@ -36,6 +37,7 @@ function createEntry (options) {
       globals: {
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react-dom/client': 'ReactDOMClient',
       },
     },
   }

npm/react/src/mount.ts

@@ -1,5 +1,6 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import type * as React from 'react'
+import type * as ReactDOM from 'react-dom'
+import major from 'semver/functions/major'
 import getDisplayName from './getDisplayName'
 import {
   injectStylesBeforeElement,
@@ -41,6 +42,28 @@ const injectStyles = (options: MountOptions) => {
  **/
 export const mount = (jsx: React.ReactNode, options: MountOptions = {}) => _mount('mount', jsx, options)
 
+function isLessThan18 (reactVersion: typeof React) {
+  return major(reactVersion.version) < 18
+}
+
+async function importReactModules () {
+  let react = await import('react')
+
+  // @ts-ignore - depending on bundler, sometimes we need to grab `.default`
+  react = react?.default ?? react
+  const reactDomImport = isLessThan18(react)
+    ? () => import('react-dom')
+    // @ts-ignore
+    : () => import('react-dom/client')
+
+  const reactDom = await reactDomImport()
+
+  return {
+    react,
+    reactDom,
+  }
+}
+
 let lastMountedReactDom: (typeof ReactDOM) | undefined
 
 /**
@@ -63,10 +86,6 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
   return cy
   .then(injectStyles(options))
   .then(() => {
-    const reactDomToUse = options.ReactDom || ReactDOM
-
-    lastMountedReactDom = reactDomToUse
-
     const el = getContainerEl()
 
     if (!el) {
@@ -84,54 +103,72 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
       key,
     }
 
-    const reactComponent = React.createElement(
-      options.strict ? React.StrictMode : React.Fragment,
-      props,
-      jsx,
-    )
-    // since we always surround the component with a fragment
-    // let's get back the original component
-    const userComponent = (reactComponent.props as {
-      key: string
-      children: React.ReactNode
-    }).children
-
-    reactDomToUse.render(reactComponent, el)
-
-    if (options.log !== false) {
-      Cypress.log({
-        name: type,
-        type: 'parent',
-        message: [message],
-        // @ts-ignore
-        $el: (el.children.item(0) as unknown) as JQuery<HTMLElement>,
-        consoleProps: () => {
-          return {
-            // @ts-ignore protect the use of jsx functional components use ReactNode
-            props: jsx.props,
-            description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
-            home: 'https://github.com/cypress-io/cypress',
-          }
-        },
-      }).snapshot('mounted').end()
+    const logMount = () => {
+      if (options.log !== false) {
+        Cypress.log({
+          name: type,
+          type: 'parent',
+          message: [message],
+          // @ts-ignore
+          $el: (el.children.item(0) as unknown) as JQuery<HTMLElement>,
+          consoleProps: () => {
+            return {
+              // @ts-ignore protect the use of jsx functional components use ReactNode
+              props: jsx.props,
+              description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
+              home: 'https://github.com/cypress-io/cypress',
+            }
+          },
+        }).snapshot('mounted').end()
+      }
     }
 
-    return (
-      // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
-      cy.wrap<React.ReactNode>(userComponent, { log: false })
-      .as(displayName)
-      .then(() => {
-        return cy.wrap<MountReturn>({
-          component: userComponent,
-          rerender: (newComponent) => _mount('rerender', newComponent, options, key),
-          unmount: () => _unmount({ boundComponentMessage: jsxComponentName, log: true }),
-        }, { log: false })
-      })
-      // by waiting, we delaying test execution for the next tick of event loop
-      // and letting hooks and component lifecycle methods to execute mount
-      // https://github.com/bahmutov/cypress-react-unit-test/issues/200
-      .wait(0, { log: false })
-    )
+    return importReactModules()
+    .then(({ react, reactDom }) => {
+      // @ts-ignore - depending on bundler, sometimes we need to grab `.default`
+      const reactDomToUse = options.ReactDom?.default ?? options.ReactDom ?? reactDom?.default ?? reactDom
+
+      lastMountedReactDom = reactDomToUse
+
+      const reactComponent = react.createElement(
+        options.strict ? react.StrictMode : react.Fragment,
+        props,
+        jsx,
+      )
+      // since we always surround the component with a fragment
+      // let's get back the original component
+      const userComponent = (reactComponent.props as {
+        key: string
+        children: React.ReactNode
+      }).children
+
+      if (isLessThan18(react)) {
+        reactDomToUse.render(reactComponent, el)
+      } else {
+        const root = reactDomToUse.createRoot(el)
+
+        root.render(reactComponent)
+      }
+
+      logMount()
+
+      return (
+        // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
+        cy.wrap<React.ReactNode>(userComponent, { log: false })
+        .as(displayName)
+        .then(() => {
+          return cy.wrap<MountReturn>({
+            component: userComponent,
+            rerender: (newComponent) => _mount('rerender', newComponent, options, key),
+            unmount: () => _unmount({ boundComponentMessage: jsxComponentName, log: true }),
+          }, { log: false })
+        })
+        // by waiting, we delaying test execution for the next tick of event loop
+        // and letting hooks and component lifecycle methods to execute mount
+        // https://github.com/bahmutov/cypress-react-unit-test/issues/200
+        .wait(0, { log: false })
+      )
+    })
   // Bluebird types are terrible. I don't think the return type can be carried without this cast
   }) as unknown as globalThis.Cypress.Chainable<MountReturn>
 }

npm/react/src/mountHook.ts

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { mount } from './mount'
 
 type MountHookResult<T> = {
@@ -77,11 +75,14 @@ function TestHook ({ callback, onError, children }: TestHookProps) {
 export const mountHook = <T>(hookFn: (...args: any[]) => T) => {
   const { result, setValue, setError } = resultContainer<T>()
 
-  const componentTest: React.ReactElement = React.createElement(TestHook, {
-    callback: hookFn,
-    onError: setError,
-    children: setValue,
-  })
+  return import('react').then((reactMod) => {
+    let react = reactMod?.default ?? reactMod
+    const componentTest = react.createElement(TestHook, {
+      callback: hookFn,
+      onError: setError,
+      children: setValue,
+    })
 
-  return mount(componentTest).then(() => result)
+    return mount(componentTest).then(() => result)
+  })
 }

npm/vite-dev-server/client/reactDomClientPlaceholder.js

@@ -0,0 +1,2 @@
+// Placeholder ...
+export default {}

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -1,7 +1,8 @@
 /// <reference path="../support/e2e.ts" />
 
 describe('Config options', () => {
-  it('supports supportFile = false', () => {
+  // TODO: add a test for this. App.cy.jsx now uses cy.mount, which requires a support file.
+  it.skip('supports supportFile = false', () => {
     cy.scaffoldProject('vite2.9.1-react')
     cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-no-support.config.ts'])
     cy.startAppServer('component')

npm/vite-dev-server/src/plugins/index.ts

@@ -1,3 +1,5 @@
 export * from './inspect'
 
 export * from './cypress'
+
+export * from './react18'

npm/vite-dev-server/src/plugins/react18.ts

@@ -0,0 +1,43 @@
+import type { Plugin } from 'vite'
+import debugLib from 'debug'
+import { usingReactWithLegacyAPI } from '../resolveConfig'
+
+const debug = debugLib('cypress:vite-dev-server:plugins:react18')
+
+/**
+ * React 18 has changed it's API.
+ * https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
+ * We need to conditionally import `react-dom/client` in our React adapter:
+ *
+ *   import('react-dom/client', (mod) => {...})
+ *
+ * In a browser environment, we can just try/catch, however Vite does some optimizations
+ * and will fail during this step if react-dom/client does not exist (React <= 17).
+ *
+ * To avoid this error and seamlessly support React 17 and 18 side by side we simply
+ * remove the react-dom/client import when using older version by rewriting the bundle using
+ * Rollup's transform API: https://rollupjs.org/guide/en/#transform (Vite using Rollup internally).
+ */
+
+export const React18 = (projectRoot: string): Plugin => {
+  return {
+    name: 'cypress:rewrite-react-dom-import',
+    enforce: 'pre',
+    transform (code, id) {
+      const isUsingLegacyApi = usingReactWithLegacyAPI(projectRoot)
+
+      if (!isUsingLegacyApi) {
+        return
+      }
+
+      // TODO: Why do we need to check against cypress-react (dev mode, system tests)
+      // AND cypress_react (production)?
+      const isCypressReact = ['cypress-react.esm-bundler.js', 'cypress_react.js'].includes(id)
+
+      if (isCypressReact) {
+        // remove problematic code via transform!
+        return code.replace('react-dom/client', 'react-dom')
+      }
+    },
+  }
+}

npm/vite-dev-server/src/resolveConfig.ts

@@ -5,17 +5,30 @@
  */
 import debugFn from 'debug'
 import { importModule } from 'local-pkg'
+import major from 'semver/functions/major'
 import { relative, resolve } from 'pathe'
 import type { InlineConfig } from 'vite'
 import path from 'path'
 
 import { configFiles } from './constants'
 import type { ViteDevServerConfig } from './devServer'
-import { Cypress, CypressInspect } from './plugins/index'
+import { Cypress, CypressInspect, React18 } from './plugins/index'
 import type { Vite } from './getVite'
 
 const debug = debugFn('cypress:vite-dev-server:resolve-config')
 
+export function usingReactWithLegacyAPI (projectRoot: string) {
+  try {
+    // using React?
+    const reactPath = require.resolve('react', { paths: [projectRoot] })
+
+    // is it <= 17?
+    return major(require(reactPath).version) <= 17
+  } catch (e) {
+    return false
+  }
+}
+
 export const createViteDevServerConfig = async (config: ViteDevServerConfig, vite: Vite) => {
   const { specs, cypressConfig, viteConfig: viteOverrides } = config
   const root = cypressConfig.projectRoot
@@ -46,6 +59,13 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
     paths: [root],
   })))
 
+  const exclude: string[] = []
+
+  if (usingReactWithLegacyAPI(cypressConfig.projectRoot)) {
+    debug('exclude react-dom/client for backwards compat')
+    exclude.push('react-dom/client')
+  }
+
   const viteBaseConfig: InlineConfig = {
     root,
     base: `${cypressConfig.devServerPublicPathRoute}/`,
@@ -69,6 +89,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
           },
         ],
       },
+      exclude,
       entries: [
         ...specs.map((s) => relative(root, s.relative)),
         ...(cypressConfig.supportFile ? [resolve(root, cypressConfig.supportFile)] : []),
@@ -84,6 +105,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
       },
     },
     plugins: [
+      React18(config.cypressConfig.projectRoot),
       Cypress(config, vite),
       CypressInspect(config),
     ].filter((p) => p != null),