fix(react18): unmount component with react18 API (#23204)

* fix(react18): unmount component with react18 API

* Add null check and explicit typing per code review

* update snapshots and make code more concise

Co-authored-by: Zachary Williams <zachjw34@gmail.com>
Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

Author: 3 people

npm/react/src/createMount.ts

@@ -1,13 +1,12 @@
 import * as React from 'react'
-import ReactDOM from 'react-dom'
 import getDisplayName from './getDisplayName'
 import {
   injectStylesBeforeElement,
   getContainerEl,
   ROOT_SELECTOR,
   setupHooks,
 } from '@cypress/mount-utils'
-import type { InternalMountOptions, InternalUnmountOptions, MountOptions, MountReturn, UnmountArgs } from './types'
+import type { InternalMountOptions, MountOptions, MountReturn, UnmountArgs } from './types'
 
 /**
  * Inject custom style text or CSS file or 3rd party style resources
@@ -20,7 +19,7 @@ const injectStyles = (options: MountOptions) => {
   }
 }
 
-export let lastMountedReactDom: (typeof ReactDOM) | undefined
+let mountCleanup: InternalMountOptions['cleanup']
 
 /**
  * Create an `mount` function. Performs all the non-React-version specific
@@ -42,6 +41,8 @@ export const makeMountFn = (
     throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters')
   }
 
+  mountCleanup = internalMountOptions.cleanup
+
   // Get the display name property via the component constructor
   // @ts-ignore FIXME
   const componentName = getDisplayName(jsx.type, options.alias)
@@ -58,8 +59,6 @@ export const makeMountFn = (
   .then(() => {
     const reactDomToUse = internalMountOptions.reactDom
 
-    lastMountedReactDom = reactDomToUse
-
     const el = getContainerEl()
 
     if (!el) {
@@ -136,41 +135,32 @@ export const makeMountFn = (
  * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
  * or people writing adapters for third-party, custom adapters.
  */
-export const makeUnmountFn = (options: UnmountArgs, internalUnmountOptions: InternalUnmountOptions) => {
+export const makeUnmountFn = (options: UnmountArgs) => {
   return cy.then(() => {
-    return cy.get(ROOT_SELECTOR, { log: false }).then(($el) => {
-      if (lastMountedReactDom) {
-        internalUnmountOptions.unmount($el[0])
-        const wasUnmounted = internalUnmountOptions.unmount($el[0])
-
-        if (wasUnmounted && options.log) {
-          Cypress.log({
-            name: 'unmount',
-            type: 'parent',
-            message: [options.boundComponentMessage ?? 'Unmounted component'],
-            consoleProps: () => {
-              return {
-                description: 'Unmounts React component',
-                parent: $el[0],
-                home: 'https://github.com/cypress-io/cypress',
-              }
-            },
-          })
-        }
-      }
-    })
+    const wasUnmounted = mountCleanup?.()
+
+    if (wasUnmounted && options.log) {
+      Cypress.log({
+        name: 'unmount',
+        type: 'parent',
+        message: [options.boundComponentMessage ?? 'Unmounted component'],
+        consoleProps: () => {
+          return {
+            description: 'Unmounts React component',
+            parent: getContainerEl().parentNode,
+            home: 'https://github.com/cypress-io/cypress',
+          }
+        },
+      })
+    }
   })
 }
 
 // Cleanup before each run
 // NOTE: we cannot use unmount here because
 // we are not in the context of a test
 const preMountCleanup = () => {
-  const el = getContainerEl()
-
-  if (el && lastMountedReactDom) {
-    lastMountedReactDom.unmountComponentAtNode(el)
-  }
+  mountCleanup?.()
 }
 
 const _mount = (jsx: React.ReactNode, options: MountOptions = {}) => makeMountFn('mount', jsx, options)

npm/react/src/mount.ts

@@ -1,34 +1,44 @@
+import { getContainerEl } from '@cypress/mount-utils'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   makeMountFn,
   makeUnmountFn,
-  lastMountedReactDom,
 } from './createMount'
 import type {
   MountOptions,
   InternalMountOptions,
-  InternalUnmountOptionsReact,
 } from './types'
 
+let lastReactDom: typeof ReactDOM
+
+const cleanup = () => {
+  if (lastReactDom) {
+    const root = getContainerEl()
+
+    lastReactDom.unmountComponentAtNode(root)
+
+    return true
+  }
+
+  return false
+}
+
 export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
     render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement, reactDomToUse: typeof ReactDOM) => {
-      return (reactDomToUse || ReactDOM).render(reactComponent, el)
+      lastReactDom = (reactDomToUse || ReactDOM)
+
+      return lastReactDom.render(reactComponent, el)
     },
     unmount,
+    cleanup,
   }
 
   return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
 }
 
 export function unmount (options = { log: true }) {
-  const internalOptions: InternalUnmountOptionsReact = {
-    unmount: (el) => {
-      return (lastMountedReactDom || ReactDOM).unmountComponentAtNode(el)
-    },
-  }
-
-  return makeUnmountFn(options, internalOptions)
+  return makeUnmountFn(options)
 }

npm/react/src/types.ts

@@ -6,18 +6,6 @@ export interface UnmountArgs {
   boundComponentMessage?: string
 }
 
-export interface InternalUnmountOptionsReact {
-  unmount: (el: HTMLElement) => boolean
-}
-
-export interface InternalUnmountOptionsReact18 {
-  unmount: () => boolean
-}
-
-export type InternalUnmountOptions =
-  InternalUnmountOptionsReact
-  | InternalUnmountOptionsReact18
-
 export type MountOptions = Partial<StyleOptions & MountReactComponentOptions>
 
 export interface MountReactComponentOptions {
@@ -43,6 +31,7 @@ export interface InternalMountOptions {
     reactDomToUse: typeof import('react-dom')
   ) => void
   unmount: (options: UnmountArgs) => void
+  cleanup: () => boolean
 
   // globalThis.Cypress.Chainable<MountReturn>
 }

npm/react18/src/index.ts

@@ -8,12 +8,21 @@ import {
 import type {
   MountOptions,
   InternalMountOptions,
-  InternalUnmountOptionsReact18,
   UnmountArgs,
 } from '@cypress/react'
 
 let root: any
 
+const cleanup = () => {
+  if (root) {
+    root.unmount()
+
+    return true
+  }
+
+  return false
+}
+
 export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
@@ -23,20 +32,12 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
       return root.render(reactComponent)
     },
     unmount,
+    cleanup,
   }
 
   return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
 }
 
 export function unmount (options: UnmountArgs = { log: true }) {
-  const internalOptions: InternalUnmountOptionsReact18 = {
-    // type is ReturnType<typeof ReactDOM.createRoot>
-    unmount: (): boolean => {
-      root.unmount()
-
-      return true
-    },
-  }
-
-  return makeUnmountFn(options, internalOptions)
+  return makeUnmountFn(options)
 }