fix(@cypress/react): Correctly unmount react components (#15250)

Author: dmtrKovalenko

npm/react/src/hooks.ts

@@ -16,22 +16,6 @@ export function setupHooks (rootId: string) {
     }
   })
 
-  /** This function stays here only for old experimental component-testing */
-  function renderTestingPlatform () {
-    if (document.getElementById(rootId)) {
-      return
-    }
-
-    const rootNode = document.createElement('div')
-
-    rootNode.setAttribute('id', rootId)
-    document.getElementsByTagName('body')[0].prepend(rootNode)
-
-    const selector = `#${rootId}`
-
-    return cy.get(selector, { log: false })
-  }
-
   /**
    * Remove any style or extra link elements from the iframe placeholder
    * left from any previous test
@@ -64,7 +48,6 @@ export function setupHooks (rootId: string) {
       return
     }
 
-    renderTestingPlatform()
     cleanupStyles()
   })
 }

npm/react/src/mount.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import ReactDOM, { unmountComponentAtNode } from 'react-dom'
+import * as ReactDOM from 'react-dom'
 import getDisplayName from './getDisplayName'
 import { injectStylesBeforeElement } from './utils'
 import { setupHooks } from './hooks'
@@ -50,7 +50,7 @@ export const mount = (jsx: React.ReactNode, options: MountOptions = {}) => {
   // @ts-ignore
   let logInstance: Cypress.Log
 
-  return cy
+  return unmount({ log: false })
   .then(() => {
     if (options.log !== false) {
       logInstance = Cypress.log({
@@ -154,13 +154,16 @@ export const mount = (jsx: React.ReactNode, options: MountOptions = {}) => {
   })
   ```
  */
-export const unmount = () => {
+export const unmount = (options = { log: true }) => {
   return cy.then(() => {
-    cy.log('unmounting...')
     const selector = `#${ROOT_ID}`
 
     return cy.get(selector, { log: false }).then(($el) => {
-      unmountComponentAtNode($el[0])
+      const wasUnmounted = ReactDOM.unmountComponentAtNode($el[0])
+
+      if (wasUnmounted && options.log) {
+        cy.log('Unmounted component at', $el)
+      }
     })
   })
 }

npm/webpack-dev-server/src/aut-runner.ts

@@ -26,9 +26,11 @@ export function init (importPromises, parent = (window.opener || window.parent))
   Cypress.onSpecWindow(window, importPromises)
   Cypress.action('app:window:before:load', window)
 
-  beforeEach(() => {
-    // This really have no sense for @cypress/react and @cypress/vue
-    // It is anyway required to mount a new
+  // Before all tests we are mounting the root element, **not beforeEach**
+  // Cleaning up platform between tests is the responsibility of the specific adapter
+  // because unmounting react/vue component should be done using specific framework API
+  // (for devtools and to get rid of global event listeners from previous tests.)
+  before(() => {
     appendTargetIfNotExists('__cy_root')
   })