fix: remove CT side effects from mount when e2e testing (#22633)

Author: ZachJW34

npm/mount-utils/src/index.ts

@@ -46,7 +46,7 @@ export const getContainerEl = (): HTMLElement => {
     return el
   }
 
-  throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`)
+  throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please add a root element with data-cy-root attribute to your "component-index.html" file so that Cypress can attach your component to the DOM.`)
 }
 
 /**
@@ -200,6 +200,14 @@ export const injectStylesBeforeElement = (
 }
 
 export function setupHooks (optionalCallback?: Function) {
+  // Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
+  // file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
+  // testing so we early return.
+  // System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
+  if (Cypress.testingType !== 'component') {
+    return
+  }
+
   // When running component specs, we cannot allow "cy.visit"
   // because it will wipe out our preparation work, and does not make much sense
   // thus we overwrite "cy.visit" to throw an error

npm/react/src/mount.ts

@@ -322,6 +322,15 @@ export declare namespace Cypress {
   }
 }
 
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
+
 // it is required to unmount component in beforeEach hook in order to provide a clean state inside test
 // because `mount` can be called after some preparation that can side effect unmount
 // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js

npm/vue/src/index.ts

@@ -306,4 +306,12 @@ export function mountCallback (
   }
 }
 
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
 setupHooks()

npm/vue2/src/index.ts

@@ -426,4 +426,12 @@ export const mountCallback = (
   return () => mount(component, options)
 }
 
+// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
+// by creating an explicit function/import that the user can register in their 'component.js' support file,
+// such as:
+//    import 'cypress/<my-framework>/support'
+// or
+//    import { registerCT } from 'cypress/<my-framework>'
+//    registerCT()
+// Note: This would be a breaking change
 setupHooks()

system-tests/projects/component-tests/cypress-e2e-mount-import.config.js

@@ -0,0 +1,13 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    supportFile: 'cypress/support/e2e-with-mount.js',
+  },
+  component: {
+    specPattern: 'cypress/component-tests/*.spec.js',
+    devServer: {
+      bundler: 'webpack',
+    },
+  },
+})

system-tests/projects/component-tests/cypress/e2e/passing-with-mount.cy.js

@@ -0,0 +1,6 @@
+it('should pass with component mount registered', () => {
+  // "cy.visit" is disabled when component testing due to a side effect of "import { mount } from 'cypress/{react,vue}'"
+  // These side effects have been disabled when testingType === 'e2e' so this will now pass.
+  cy.visit('./index.html')
+  cy.contains('h1', 'Hello World')
+})

system-tests/projects/component-tests/cypress/support/e2e-with-mount.js

@@ -0,0 +1,3 @@
+import { mount } from 'cypress/react'
+
+Cypress.Commands.add('mount', mount)

system-tests/projects/component-tests/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h1>Hello World</h1>
+</body>
+</html> 

system-tests/test/e2e_with_mount_import_spec.ts

@@ -0,0 +1,10 @@
+import systemTests from '../lib/system-tests'
+
+// see: https://github.com/cypress-io/cypress/issues/22589
+systemTests.it('should not run CT side effects in e2e with mount registration', {
+  project: 'component-tests',
+  spec: 'passing-with-mount.cy.js',
+  browser: 'chrome',
+  configFile: 'cypress-e2e-mount-import.config.js',
+  expectedExitCode: 0,
+})