diff --git a/npm/react/src/hooks.ts b/npm/react/src/hooks.ts index 4b9943b0c7c2..eed46784573d 100644 --- a/npm/react/src/hooks.ts +++ b/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() }) } diff --git a/npm/react/src/mount.ts b/npm/react/src/mount.ts index 64f90d34ab1d..01c44b6211f8 100644 --- a/npm/react/src/mount.ts +++ b/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) + } }) }) } diff --git a/npm/webpack-dev-server/src/aut-runner.ts b/npm/webpack-dev-server/src/aut-runner.ts index 1f6f7159e95c..f1bf3238547c 100644 --- a/npm/webpack-dev-server/src/aut-runner.ts +++ b/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') })