cypress 10.1.0 → 10.3.1

package/vue/dist/cypress-vue.esm-bundler.js

@@ -8,7 +8,7 @@
 import * as Vue from 'vue';
 import { nextTick, defineComponent, computed, h, reactive, createApp, transformVNodeArgs, Transition, TransitionGroup, Teleport, setDevtoolsHook } from 'vue';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -32,7 +32,161 @@ var __assign$1 = function() {
         return t;
     };
     return __assign$1.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const ROOT_SELECTOR = '[data-cy-root]';
+const getContainerEl = () => {
+    const el = document.querySelector(ROOT_SELECTOR);
+    if (el) {
+        return el;
+    }
+    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.`);
 };
+/**
+ * Remove any style or extra link elements from the iframe placeholder
+ * left from any previous test
+ *
+ */
+function cleanupStyles() {
+    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
+    styles.forEach((styleElement) => {
+        if (styleElement.parentElement) {
+            styleElement.parentElement.removeChild(styleElement);
+        }
+    });
+    const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
+    links.forEach((link) => {
+        if (link.parentElement) {
+            link.parentElement.removeChild(link);
+        }
+    });
+}
+/**
+ * Insert links to external style resources.
+ */
+function insertStylesheets(stylesheets, document, el) {
+    stylesheets.forEach((href) => {
+        const link = document.createElement('link');
+        link.type = 'text/css';
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.dataset.cy = 'injected-stylesheet';
+        document.body.insertBefore(link, el);
+    });
+}
+/**
+ * Inserts a single stylesheet element
+ */
+function insertStyles(styles, document, el) {
+    styles.forEach((style) => {
+        const styleElement = document.createElement('style');
+        styleElement.dataset.cy = 'injected-style-tag';
+        styleElement.appendChild(document.createTextNode(style));
+        document.body.insertBefore(styleElement, el);
+    });
+}
+function insertSingleCssFile(cssFilename, document, el, log) {
+    return cy.readFile(cssFilename, { log }).then((css) => {
+        const style = document.createElement('style');
+        style.appendChild(document.createTextNode(css));
+        document.body.insertBefore(style, el);
+    });
+}
+/**
+ * Reads the given CSS file from local file system
+ * and adds the loaded style text as an element.
+ */
+function insertLocalCssFiles(cssFilenames, document, el, log) {
+    return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
+        return insertSingleCssFile(cssFilename, document, el, log);
+    });
+}
+/**
+ * Injects custom style text or CSS file or 3rd party style resources
+ * into the given document.
+ */
+const injectStylesBeforeElement = (options, document, el) => {
+    if (!el)
+        return;
+    // first insert all stylesheets as Link elements
+    let stylesheets = [];
+    if (typeof options.stylesheet === 'string') {
+        stylesheets.push(options.stylesheet);
+    }
+    else if (Array.isArray(options.stylesheet)) {
+        stylesheets = stylesheets.concat(options.stylesheet);
+    }
+    if (typeof options.stylesheets === 'string') {
+        options.stylesheets = [options.stylesheets];
+    }
+    if (options.stylesheets) {
+        stylesheets = stylesheets.concat(options.stylesheets);
+    }
+    insertStylesheets(stylesheets, document, el);
+    // insert any styles as <style>...</style> elements
+    let styles = [];
+    if (typeof options.style === 'string') {
+        styles.push(options.style);
+    }
+    else if (Array.isArray(options.style)) {
+        styles = styles.concat(options.style);
+    }
+    if (typeof options.styles === 'string') {
+        styles.push(options.styles);
+    }
+    else if (Array.isArray(options.styles)) {
+        styles = styles.concat(options.styles);
+    }
+    insertStyles(styles, document, el);
+    // now load any css files by path and add their content
+    // as <style>...</style> elements
+    let cssFiles = [];
+    if (typeof options.cssFile === 'string') {
+        cssFiles.push(options.cssFile);
+    }
+    else if (Array.isArray(options.cssFile)) {
+        cssFiles = cssFiles.concat(options.cssFile);
+    }
+    if (typeof options.cssFiles === 'string') {
+        cssFiles.push(options.cssFiles);
+    }
+    else if (Array.isArray(options.cssFiles)) {
+        cssFiles = cssFiles.concat(options.cssFiles);
+    }
+    return insertLocalCssFiles(cssFiles, document, el, options.log);
+};
+function setupHooks(optionalCallback) {
+    // 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
+    Cypress.Commands.overwrite('visit', () => {
+        throw new Error('cy.visit from a component spec is not allowed');
+    });
+    // @ts-ignore
+    Cypress.on('test:before:run', () => {
+        optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
+        cleanupStyles();
+    });
+}
 
 /**
  * Make a map and return a function for checking if a key
@@ -6768,7 +6922,12 @@ function stubComponents(stubs, shallow, renderStubDefaultSlot) {
                     throw new Error('Attempted to stub a non-component');
                 }
                 var newStub = createStubOnce(type, function () {
-                    return createStub({
+                    return config.plugins.createStubs
+                        ? config.plugins.createStubs({
+                            name: stubName_1,
+                            component: type
+                        })
+                        : createStub({
                             name: stubName_1,
                             type: type,
                             renderStubDefaultSlot: renderStubDefaultSlot
@@ -12997,6 +13156,30 @@ function processSlot(source, Vue$1) {
     };
 }
 
+var isEnabled = false;
+var wrapperInstances = [];
+function disableAutoUnmount() {
+    isEnabled = false;
+    wrapperInstances.length = 0;
+}
+function enableAutoUnmount(hook) {
+    if (isEnabled) {
+        throw new Error('enableAutoUnmount cannot be called more than once');
+    }
+    isEnabled = true;
+    hook(function () {
+        wrapperInstances.forEach(function (wrapper) {
+            wrapper.unmount();
+        });
+        wrapperInstances.length = 0;
+    });
+}
+function trackInstance(wrapper) {
+    if (!isEnabled)
+        return;
+    wrapperInstances.push(wrapper);
+}
+
 var MOUNT_OPTIONS = [
     'attachTo',
     'attrs',
@@ -13225,8 +13408,12 @@ function mount$1(inputComponent, options) {
     };
     console.warn = warnSave;
     var wrapper = createVueWrapper(app, appRef, setProps);
+    trackInstance(wrapper);
     return wrapper;
 }
+var shallowMount = function (component, options) {
+    return mount$1(component, __assign(__assign({}, options), { shallow: true }));
+};
 
 // match return type of router.resolve: RouteLocation & { href: string }
 var defaultRoute = {
@@ -13242,7 +13429,7 @@ var defaultRoute = {
     href: '/'
 };
 // TODO: Borrow typings from vue-router-next
-defineComponent({
+var RouterLinkStub = defineComponent({
     name: 'RouterLinkStub',
     props: {
         to: {
@@ -13272,143 +13459,32 @@ defineComponent({
     }
 });
 
-typeof setImmediate === 'function' ? setImmediate : setTimeout;
-
-const ROOT_SELECTOR = '[data-cy-root]';
-const getContainerEl = () => {
-    const el = document.querySelector(ROOT_SELECTOR);
-    if (el) {
-        return el;
-    }
-    throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`);
-};
-/**
- * Remove any style or extra link elements from the iframe placeholder
- * left from any previous test
- *
- */
-function cleanupStyles() {
-    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
-    styles.forEach((styleElement) => {
-        if (styleElement.parentElement) {
-            styleElement.parentElement.removeChild(styleElement);
-        }
-    });
-    const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
-    links.forEach((link) => {
-        if (link.parentElement) {
-            link.parentElement.removeChild(link);
-        }
-    });
-}
-/**
- * Insert links to external style resources.
- */
-function insertStylesheets(stylesheets, document, el) {
-    stylesheets.forEach((href) => {
-        const link = document.createElement('link');
-        link.type = 'text/css';
-        link.rel = 'stylesheet';
-        link.href = href;
-        link.dataset.cy = 'injected-stylesheet';
-        document.body.insertBefore(link, el);
-    });
-}
-/**
- * Inserts a single stylesheet element
- */
-function insertStyles(styles, document, el) {
-    styles.forEach((style) => {
-        const styleElement = document.createElement('style');
-        styleElement.dataset.cy = 'injected-style-tag';
-        styleElement.appendChild(document.createTextNode(style));
-        document.body.insertBefore(styleElement, el);
-    });
-}
-function insertSingleCssFile(cssFilename, document, el, log) {
-    return cy.readFile(cssFilename, { log }).then((css) => {
-        const style = document.createElement('style');
-        style.appendChild(document.createTextNode(css));
-        document.body.insertBefore(style, el);
-    });
-}
-/**
- * Reads the given CSS file from local file system
- * and adds the loaded style text as an element.
- */
-function insertLocalCssFiles(cssFilenames, document, el, log) {
-    return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
-        return insertSingleCssFile(cssFilename, document, el, log);
-    });
-}
-/**
- * Injects custom style text or CSS file or 3rd party style resources
- * into the given document.
- */
-const injectStylesBeforeElement = (options, document, el) => {
-    if (!el)
-        return;
-    // first insert all stylesheets as Link elements
-    let stylesheets = [];
-    if (typeof options.stylesheet === 'string') {
-        stylesheets.push(options.stylesheet);
-    }
-    else if (Array.isArray(options.stylesheet)) {
-        stylesheets = stylesheets.concat(options.stylesheet);
-    }
-    if (typeof options.stylesheets === 'string') {
-        options.stylesheets = [options.stylesheets];
-    }
-    if (options.stylesheets) {
-        stylesheets = stylesheets.concat(options.stylesheets);
-    }
-    insertStylesheets(stylesheets, document, el);
-    // insert any styles as <style>...</style> elements
-    let styles = [];
-    if (typeof options.style === 'string') {
-        styles.push(options.style);
-    }
-    else if (Array.isArray(options.style)) {
-        styles = styles.concat(options.style);
-    }
-    if (typeof options.styles === 'string') {
-        styles.push(options.styles);
-    }
-    else if (Array.isArray(options.styles)) {
-        styles = styles.concat(options.styles);
-    }
-    insertStyles(styles, document, el);
-    // now load any css files by path and add their content
-    // as <style>...</style> elements
-    let cssFiles = [];
-    if (typeof options.cssFile === 'string') {
-        cssFiles.push(options.cssFile);
-    }
-    else if (Array.isArray(options.cssFile)) {
-        cssFiles = cssFiles.concat(options.cssFile);
-    }
-    if (typeof options.cssFiles === 'string') {
-        cssFiles.push(options.cssFiles);
-    }
-    else if (Array.isArray(options.cssFiles)) {
-        cssFiles = cssFiles.concat(options.cssFiles);
-    }
-    return insertLocalCssFiles(cssFiles, document, el, options.log);
-};
-function setupHooks(optionalCallback) {
-    // 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
-    Cypress.Commands.overwrite('visit', () => {
-        throw new Error('cy.visit from a component spec is not allowed');
-    });
-    // @ts-ignore
-    Cypress.on('test:before:run', () => {
-        optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
-    });
+var scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;
+// Credit to: https://github.com/kentor/flush-promises
+function flushPromises() {
+    return new Promise(function (resolve) {
+        scheduler(resolve, 0);
+    });
 }
 
+var _VueTestUtils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DOMWrapper: DOMWrapper,
+    RouterLinkStub: RouterLinkStub,
+    VueWrapper: VueWrapper,
+    config: config,
+    createWrapperError: createWrapperError,
+    disableAutoUnmount: disableAutoUnmount,
+    enableAutoUnmount: enableAutoUnmount,
+    flushPromises: flushPromises,
+    mount: mount$1,
+    shallowMount: shallowMount
+});
+
+var // We do not expose the `mount` from VueTestUtils, instead, we wrap it and expose a
+// Cypress-compatible `mount` API.
+VTUmount = mount$1, 
+VueTestUtils = __rest(_VueTestUtils, ["mount", "shallowMount"]);
 var DEFAULT_COMP_NAME = 'unknown';
 Cypress.on('run:start', function () {
     // `mount` is designed to work with component testing only.
@@ -13457,7 +13533,7 @@ function mount(componentOptions, options) {
         componentNode.id = '__cy_vue_root';
         el.append(componentNode);
         // mount the component using VTU and return the wrapper in Cypress.VueWrapper
-        var wrapper = mount$1(componentOptions, __assign$1({ attachTo: componentNode }, options));
+        var wrapper = VTUmount(componentOptions, __assign$1({ attachTo: componentNode }, options));
         Cypress.vueWrapper = wrapper;
         Cypress.vue = wrapper.vm;
         return cy
@@ -13506,6 +13582,14 @@ function mountCallback(component, options) {
         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();
 
-export { mount, mountCallback };
+export { VueTestUtils, mount, mountCallback };

package/vue/dist/index.d.ts

@@ -1,7 +1,39 @@
 /// <reference types="cypress" />
-import { ComponentPublicInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, ExtractDefaultPropTypes, DefineComponent, FunctionalComponent, ComputedOptions, MethodOptions, ComponentOptionsMixin, EmitsOptions, ComponentOptionsWithObjectProps, ComponentPropsOptions, ComponentOptionsWithArrayProps, ComponentOptionsWithoutProps } from 'vue';
-import { MountingOptions, VueWrapper } from '@vue/test-utils';
+import type { ComponentPublicInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, ExtractDefaultPropTypes, DefineComponent, FunctionalComponent, ComputedOptions, MethodOptions, ComponentOptionsMixin, EmitsOptions, ComponentOptionsWithObjectProps, ComponentPropsOptions, ComponentOptionsWithArrayProps, ComponentOptionsWithoutProps } from 'vue';
+import type { MountingOptions, VueWrapper } from './@vue/test-utils';
 import { StyleOptions } from '@cypress/mount-utils';
+import * as _VueTestUtils from './@vue/test-utils';
+declare const VueTestUtils: {
+    enableAutoUnmount: typeof _VueTestUtils.enableAutoUnmount;
+    disableAutoUnmount: typeof _VueTestUtils.disableAutoUnmount;
+    RouterLinkStub: DefineComponent<{
+        to: {
+            type: (ObjectConstructor | StringConstructor)[];
+            required: true;
+        };
+        custom: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }, unknown, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+        to: {
+            type: (ObjectConstructor | StringConstructor)[];
+            required: true;
+        };
+        custom: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>>, {
+        custom: boolean;
+    }>;
+    VueWrapper: typeof VueWrapper;
+    DOMWrapper: typeof _VueTestUtils.DOMWrapper;
+    config: import("./@vue/test-utils/config").GlobalConfigOptions;
+    flushPromises: typeof _VueTestUtils.flushPromises;
+    createWrapperError: typeof _VueTestUtils.createWrapperError;
+};
+export { VueTestUtils };
 declare type GlobalMountOptions = Required<MountingOptions<any>>['global'];
 declare global {
     namespace Cypress {
@@ -53,4 +85,3 @@ export declare function mount<PropsOptions extends Readonly<ComponentPropsOption
  *  beforeEach(mountVue(component, options))
  */
 export declare function mountCallback(component: any, options?: any): () => Cypress.Chainable;
-export {};

package/vue/package.json

@@ -2,21 +2,18 @@
   "name": "@cypress/vue",
   "version": "0.0.0-development",
   "description": "Browser-based Component Testing for Vue.js with Cypress.io ✌️🌲",
-  "private": true,
   "main": "dist/cypress-vue.cjs.js",
   "scripts": {
     "build-prod": "yarn build",
     "cy:open": "node ../../scripts/cypress.js open --component --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run --component --project ${PWD}",
     "build": "rimraf dist && rollup -c rollup.config.js",
-    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
-    "typecheck": "vue-tsc --noEmit",
+    "postbuild": "node --require @packages/ts/register ./inline-types.ts && node ../../scripts/sync-exported-npm-with-cli.js",
+    "typecheck": "yarn tsd && vue-tsc --noEmit",
     "test": "yarn cy:run",
+    "tsd": "yarn build && yarn tsc -p test-tsd/tsconfig.tsd.json",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
-  "dependencies": {
-    "@vue/test-utils": "2.0.0-rc.19"
-  },
   "devDependencies": {
     "@cypress/code-coverage": "3.8.1",
     "@cypress/mount-utils": "0.0.0-development",
@@ -24,9 +21,11 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@vitejs/plugin-vue": "2.3.1",
     "@vue/compiler-sfc": "3.2.31",
+    "@vue/test-utils": "2.0.0-rc.19",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
     "debug": "^4.3.2",
+    "globby": "^11.0.1",
     "rollup": "^2.38.5",
     "rollup-plugin-istanbul": "2.0.1",
     "rollup-plugin-typescript2": "^0.29.0",
@@ -51,7 +50,7 @@
   "engines": {
     "node": ">=8"
   },
-  "types": "dist",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -72,6 +71,10 @@
     {
       "name": "Amir Rustamzadeh",
       "social": "@amirrustam"
+    },
+    {
+      "name": "Lachlan Miller",
+      "social": "@Lachlan19900"
     }
   ],
   "module": "dist/cypress-vue.esm-bundler.js",

package/vue2/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [@cypress/vue2-v1.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.0.0...@cypress/vue2-v1.0.1) (2022-06-13)
+
+
+### Bug Fixes
+
+* remove http npm registry link for vue2 ([0bd3069](https://github.com/cypress-io/cypress/commit/0bd306962bce2a32d7b87fc1811a7b9feeb63ae2))
+
+# @cypress/vue2-v1.0.0 (2022-06-13)
+
+
+### Bug Fixes
+
+* add package.json metadata for webpack-dev-server ([#22292](https://github.com/cypress-io/cypress/issues/22292)) ([9cfec97](https://github.com/cypress-io/cypress/commit/9cfec9750f2ddc9fe691aabbe2ecc9bc02a3d915))
+* display cy.mount command log ([#21500](https://github.com/cypress-io/cypress/issues/21500)) ([140b4ba](https://github.com/cypress-io/cypress/commit/140b4ba2110243712a614a39b2408c30cce4d0b1))
+* Doc changes around vue2 ([#21066](https://github.com/cypress-io/cypress/issues/21066)) ([17905a7](https://github.com/cypress-io/cypress/commit/17905a79ee5106b0d72c8e74bb717fcd7b796dee))
+
+
+### chore
+
+* prep npm packages for use with Cypress v10 ([b924d08](https://github.com/cypress-io/cypress/commit/b924d086ee2e2ccc93303731e001b2c9e9d0af17))
+
+
+### Features
+
+* Add vue2 package from npm/vue/v2 branch ([#21026](https://github.com/cypress-io/cypress/issues/21026)) ([3aa69e2](https://github.com/cypress-io/cypress/commit/3aa69e2538aae5702bfc48789c54f37263ce08fc))
+* swap the #__cy_root id selector to become data-cy-root for component mounting ([#20951](https://github.com/cypress-io/cypress/issues/20951)) ([0e7b555](https://github.com/cypress-io/cypress/commit/0e7b555f93fb403f431c5de4a07ae7ad6ac89ba2))
+
+
+### BREAKING CHANGES
+
+* new version of packages for Cypress v10
+
 # @cypress/vue2-v1.0.0 (2021-06-17)
 
 ### Features

package/vue2/dist/cypress-vue2.browser.js

@@ -12,7 +12,7 @@ var CypressVue2 = (function (exports, require$$0$1) {
 
     var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0$1);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -19857,7 +19857,7 @@ var CypressVue2 = (function (exports, require$$0$1) {
         if (el) {
             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.`);
     };
     /**
      * Remove any style or extra link elements from the iframe placeholder
@@ -19973,6 +19973,13 @@ var CypressVue2 = (function (exports, require$$0$1) {
         return insertLocalCssFiles(cssFiles, document, el, options.log);
     };
     function setupHooks(optionalCallback) {
+        // 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
@@ -20179,6 +20186,14 @@ var CypressVue2 = (function (exports, require$$0$1) {
     var mountCallback = function (component, options) {
         return function () { return mount$1(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();
 
     exports.mount = mount$1;

package/vue2/dist/cypress-vue2.cjs.js

@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0$1);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -19860,7 +19860,7 @@ const getContainerEl = () => {
     if (el) {
         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.`);
 };
 /**
  * Remove any style or extra link elements from the iframe placeholder
@@ -19976,6 +19976,13 @@ const injectStylesBeforeElement = (options, document, el) => {
     return insertLocalCssFiles(cssFiles, document, el, options.log);
 };
 function setupHooks(optionalCallback) {
+    // 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
@@ -20182,6 +20189,14 @@ var mount$1 = function (component, optionsOrProps) {
 var mountCallback = function (component, options) {
     return function () { return mount$1(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();
 
 exports.mount = mount$1;