fix: remove last mounted component upon subsequent mount calls

npm/angular/src/mount.ts

@@ -8,7 +8,7 @@ window.Mocha['__zone_patch__'] = false
 import 'zone.js/testing'
 
 import { CommonModule } from '@angular/common'
-import { Component, ErrorHandler, EventEmitter, Injectable, SimpleChange, SimpleChanges, Type } from '@angular/core'
+import { Component, ErrorHandler, EventEmitter, Injectable, SimpleChange, SimpleChanges, Type, OnChanges } from '@angular/core'
 import {
   ComponentFixture,
   getTestBed,
@@ -72,6 +72,23 @@ export interface MountConfig<T> extends TestModuleMetadata {
   componentProperties?: Partial<{ [P in keyof T]: T[P] }>
 }
 
+let activeFixture: ComponentFixture<any> | null = null
+
+function cleanup () {
+  // Not public, we need to call this to remove the last component from the DOM
+  try {
+    (getTestBed() as any).tearDownTestingModule()
+  } catch (e) {
+    const notSupportedError = new Error(`Failed to teardown component. The version of Angular you are using may not be officially supported.`)
+
+    ;(notSupportedError as any).docsUrl = 'https://on.cypress.io/component-framework-configuration'
+    throw notSupportedError
+  }
+
+  getTestBed().resetTestingModule()
+  activeFixture = null
+}
+
 /**
  * Type that the `mount` function returns
  * @type MountResponse<T>
@@ -209,6 +226,8 @@ function setupFixture<T> (
 ): ComponentFixture<T> {
   const fixture = getTestBed().createComponent(component)
 
+  setupComponent(config, fixture)
+
   fixture.whenStable().then(() => {
     fixture.autoDetectChanges(config.autoDetectChanges ?? true)
   })
@@ -223,17 +242,18 @@ function setupFixture<T> (
  * @param {ComponentFixture<T>} fixture Fixture for debugging and testing a component.
  * @returns {T} Component being mounted
  */
-function setupComponent<T extends { ngOnChanges? (changes: SimpleChanges): void }> (
+function setupComponent<T> (
   config: MountConfig<T>,
-  fixture: ComponentFixture<T>): T {
-  let component: T = fixture.componentInstance
+  fixture: ComponentFixture<T>,
+): void {
+  let component = fixture.componentInstance as unknown as { [key: string]: any } & Partial<OnChanges>
 
   if (config?.componentProperties) {
     component = Object.assign(component, config.componentProperties)
   }
 
   if (config.autoSpyOutputs) {
-    Object.keys(component).forEach((key: string, index: number, keys: string[]) => {
+    Object.keys(component).forEach((key) => {
       const property = component[key]
 
       if (property instanceof EventEmitter) {
@@ -252,14 +272,12 @@ function setupComponent<T extends { ngOnChanges? (changes: SimpleChanges): void
       acc[key] = new SimpleChange(null, value, true)
 
       return acc
-    }, {})
+    }, {} as {[key: string]: SimpleChange})
 
     if (Object.keys(componentProperties).length > 0) {
       component.ngOnChanges(simpleChanges)
     }
   }
-
-  return component
 }
 
 /**
@@ -295,13 +313,18 @@ export function mount<T> (
   component: Type<T> | string,
   config: MountConfig<T> = { },
 ): Cypress.Chainable<MountResponse<T>> {
+  // Remove last mounted component if cy.mount is called more than once in a test
+  if (activeFixture) {
+    cleanup()
+  }
+
   const componentFixture = initTestBed(component, config)
-  const fixture = setupFixture(componentFixture, config)
-  const componentInstance = setupComponent(config, fixture)
+
+  activeFixture = setupFixture(componentFixture, config)
 
   const mountResponse: MountResponse<T> = {
-    fixture,
-    component: componentInstance,
+    fixture: activeFixture,
+    component: activeFixture.componentInstance,
   }
 
   const logMessage = typeof component === 'string' ? 'Component' : componentFixture.name
@@ -338,8 +361,4 @@ getTestBed().initTestEnvironment(
   },
 )
 
-setupHooks(() => {
-  // Not public, we need to call this to remove the last component from the DOM
-  getTestBed()['tearDownTestingModule']()
-  getTestBed().resetTestingModule()
-})
+setupHooks(cleanup)

npm/angular/tsconfig.json

@@ -11,15 +11,15 @@
     "allowJs": true,
     "declaration": true,
     "outDir": "dist",
-    "strict": false,
-    "noImplicitAny": false,
+    "strict": true,
     "baseUrl": "./",
     "types": [
       "cypress"
     ],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "noPropertyAccessFromIndexSignature": true,
   },
   "include": ["src/**/*.*"],
   "exclude": ["src/**/*-spec.*"]

npm/mount-utils/create-rollup-entry.mjs

@@ -68,10 +68,19 @@ export function createEntries (options) {
     console.log(`Building ${format}: ${finalConfig.output.file}`)
 
     return finalConfig
-  }).concat({
+  }).concat([{
     input,
     output: [{ file: 'dist/index.d.ts', format: 'es' }],
-    plugins: [dts({ respectExternal: true })],
+    plugins: [
+      dts({ respectExternal: true }),
+      {
+        name: 'cypress-types-reference',
+        // rollup-plugin-dts does not add '// <reference types="cypress" />' like rollup-plugin-typescript2 did so we add it here.
+        renderChunk (...[code]) {
+          return `/// <reference types="cypress" />\n\n${code}`
+        },
+      },
+    ],
     external: config.external || [],
-  })
+  }])
 }

npm/react/src/mount.ts

@@ -33,6 +33,9 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
     Cypress.log({ name: 'warning', message })
   }
 
+  // Remove last mounted component if cy.mount is called more than once in a test
+  cleanup()
+
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
     render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement, reactDomToUse: typeof ReactDOM) => {

npm/react18/src/index.ts

@@ -26,6 +26,10 @@ const cleanup = () => {
 }
 
 export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
+  // Remove last mounted component if cy.mount is called more than once in a test
+  // React by default removes the last component when calling render, but we should remove the root
+  // to wipe away any state
+  cleanup()
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
     render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement) => {

npm/svelte/src/mount.ts

@@ -62,6 +62,9 @@ export function mount<T extends SvelteComponent> (
   options: MountOptions<T> = {},
 ): Cypress.Chainable<MountReturn<T>> {
   return cy.then(() => {
+    // Remove last mounted component if cy.mount is called more than once in a test
+    cleanup()
+
     const target = getContainerEl()
 
     injectStylesBeforeElement(options, document, target)

npm/vue/src/index.ts

@@ -72,24 +72,12 @@ type MountingOptions<Props, Data = {}> = Omit<VTUMountingOptions<Props, Data>, '
 
 export type CyMountOptions<Props, Data = {}> = MountingOptions<Props, Data>
 
-Cypress.on('run:start', () => {
-  // `mount` is designed to work with component testing only.
-  // it assumes ROOT_SELECTOR exists, which is not the case in e2e.
-  // if the user registers a custom command that imports `cypress/vue`,
-  // this event will be registered and cause an error when the user
-  // launches e2e (since it's common to use Cypress for both CT and E2E.
-  // https://github.com/cypress-io/cypress/issues/17438
-  if (Cypress.testingType !== 'component') {
-    return
-  }
-
-  Cypress.on('test:before:run', () => {
-    Cypress.vueWrapper?.unmount()
-    const el = getContainerEl()
+const cleanup = () => {
+  Cypress.vueWrapper?.unmount()
+  const el = getContainerEl()
 
-    el.innerHTML = ''
-  })
-})
+  el.innerHTML = ''
+}
 
 /**
  * The types for mount have been copied directly from the VTU mount
@@ -378,6 +366,9 @@ export function mount<
 
 // implementation
 export function mount (componentOptions: any, options: any = {}) {
+  // Remove last mounted component if cy.mount is called more than once in a test
+  cleanup()
+
   // TODO: get the real displayName and props from VTU shallowMount
   const componentName = getComponentDisplayName(componentOptions)
 
@@ -484,4 +475,4 @@ export function mountCallback (
 //    import { registerCT } from 'cypress/<my-framework>'
 //    registerCT()
 // Note: This would be a breaking change
-setupHooks()
+setupHooks(cleanup)

npm/vue2/src/index.ts

@@ -5,7 +5,6 @@ import {
   mount as testUtilsMount,
   VueTestUtilsConfigOptions,
   Wrapper,
-  enableAutoDestroy,
 } from '@vue/test-utils'
 import {
   injectStylesBeforeElement,
@@ -266,6 +265,10 @@ declare global {
   }
 }
 
+const cleanup = () => {
+  Cypress.vueWrapper?.destroy()
+}
+
 /**
  * Direct Vue errors to the top error handler
  * where they will fail Cypress test
@@ -280,14 +283,6 @@ function failTestOnVueError (err, vm, info) {
   })
 }
 
-function registerAutoDestroy ($destroy: () => void) {
-  Cypress.on('test:before:run', () => {
-    $destroy()
-  })
-}
-
-enableAutoDestroy(registerAutoDestroy)
-
 const injectStyles = (options: StyleOptions) => {
   return injectStylesBeforeElement(options, document, getContainerEl())
 }
@@ -336,6 +331,9 @@ export const mount = (
   wrapper: Wrapper<Vue, Element>
   component: Wrapper<Vue, Element>['vm']
 }> => {
+  // Remove last mounted component if cy.mount is called more than once in a test
+  cleanup()
+
   const options: Partial<MountOptions> = Cypress._.pick(
     optionsOrProps,
     defaultOptions,
@@ -442,4 +440,4 @@ export const mountCallback = (
 //    import { registerCT } from 'cypress/<my-framework>'
 //    registerCT()
 // Note: This would be a breaking change
-setupHooks()
+setupHooks(cleanup)

npm/webpack-dev-server/src/devServer.ts

@@ -137,7 +137,7 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
       return { sourceWebpackModulesResult: sourceDefaultWebpackDependencies(devServerConfig) }
 
     default:
-      throw new Error(`Unexpected framework ${(devServerConfig as any).framework}, please visit https://docs.cypress.io/guides/component-testing/component-framework-configuration to see a list of supported frameworks`)
+      throw new Error(`Unexpected framework ${(devServerConfig as any).framework}, please visit https://on.cypress.io/component-framework-configuration to see a list of supported frameworks`)
   }
 }