cypress 10.10.0 → 11.0.0

package/react18/dist/cypress-react.esm-bundler.js

@@ -9,17 +9,30 @@ import ReactDOM from 'react-dom/client';
 import * as React from 'react';
 import 'react-dom';
 
-const cachedDisplayNames = new WeakMap();
+const ROOT_SELECTOR$1 = '[data-cy-root]';
+/**
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
+ */
+const getContainerEl$1 = () => {
+    const el = document.querySelector(ROOT_SELECTOR$1);
+    if (el) {
+        return el;
+    }
+    throw Error(`No element found that matches selector ${ROOT_SELECTOR$1}. 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.`);
+};
+
 /**
  * Gets the display name of the component when possible.
  * @param type {JSX} The type object returned from creating the react element.
  * @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
  * @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
  */
-function getDisplayName(type, fallbackName = 'Unknown') {
-    const nameFromCache = cachedDisplayNames.get(type);
-    if (nameFromCache != null) {
-        return nameFromCache;
+function getDisplayName(node, fallbackName = 'Unknown') {
+    const type = node === null || node === void 0 ? void 0 : node.type;
+    if (!type) {
+        return fallbackName;
     }
     let displayName = null;
     // The displayName property is not guaranteed to be a string.
@@ -44,16 +57,15 @@ function getDisplayName(type, fallbackName = 'Unknown') {
             }
         }
     }
-    try {
-        cachedDisplayNames.set(type, displayName);
-    }
-    catch (e) {
-        // do nothing
-    }
     return displayName;
 }
 
 const ROOT_SELECTOR = '[data-cy-root]';
+/**
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
+ */
 const getContainerEl = () => {
     const el = document.querySelector(ROOT_SELECTOR);
     if (el) {
@@ -61,122 +73,19 @@ const getContainerEl = () => {
     }
     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);
+function checkForRemovedStyleOptions(mountingOptions) {
+    for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
+        if (mountingOptions[key]) {
+            Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
         }
-    });
-}
-/**
- * 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.
+ * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
+ * @param optionalCallback Callback to be called before the next test runs
  */
-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
+    // 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') {
@@ -191,19 +100,9 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
-/**
- * Inject custom style text or CSS file or 3rd party style resources
- */
-const injectStyles = (options) => {
-    return () => {
-        const el = getContainerEl();
-        return injectStylesBeforeElement(options, document, el);
-    };
-};
 let mountCleanup;
 /**
  * Create an `mount` function. Performs all the non-React-version specific
@@ -218,17 +117,14 @@ const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions)
     if (!internalMountOptions) {
         throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
     }
+    // @ts-expect-error - this is removed but we want to check if a user is passing it, and error if they are.
+    if (options.alias) {
+        // @ts-expect-error
+        Cypress.utils.throwErrByPath('mount.alias', options.alias);
+    }
+    checkForRemovedStyleOptions(options);
     mountCleanup = internalMountOptions.cleanup;
-    // Get the display name property via the component constructor
-    // @ts-ignore FIXME
-    const componentName = getDisplayName(jsx.type, options.alias);
-    const displayName = options.alias || componentName;
-    const jsxComponentName = `<${componentName} ... />`;
-    const message = options.alias
-        ? `${jsxComponentName} as "${options.alias}"`
-        : jsxComponentName;
     return cy
-        .then(injectStyles(options))
         .then(() => {
         var _a, _b, _c;
         const reactDomToUse = internalMountOptions.reactDom;
@@ -249,38 +145,44 @@ const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions)
         // let's get back the original component
         const userComponent = reactComponent.props.children;
         internalMountOptions.render(reactComponent, el, reactDomToUse);
-        if (options.log !== false) {
-            Cypress.log({
-                name: type,
-                type: 'parent',
-                message: [message],
-                // @ts-ignore
-                $el: el.children.item(0),
-                consoleProps: () => {
-                    return {
-                        // @ts-ignore protect the use of jsx functional components use ReactNode
-                        props: jsx.props,
-                        description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
-                        home: 'https://github.com/cypress-io/cypress',
-                    };
-                },
-            }).snapshot('mounted').end();
-        }
-        return (
-        // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
-        cy.wrap(userComponent, { log: false })
-            .as(displayName)
+        return (cy.wrap(userComponent, { log: false })
             .then(() => {
             return cy.wrap({
                 component: userComponent,
                 rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
-                unmount: internalMountOptions.unmount,
+                unmount: () => {
+                    // @ts-expect-error - undocumented API
+                    Cypress.utils.throwErrByPath('mount.unmount');
+                },
             }, { log: false });
         })
             // by waiting, we delaying test execution for the next tick of event loop
             // and letting hooks and component lifecycle methods to execute mount
             // https://github.com/bahmutov/cypress-react-unit-test/issues/200
-            .wait(0, { log: false }));
+            .wait(0, { log: false })
+            .then(() => {
+            if (options.log !== false) {
+                // Get the display name property via the component constructor
+                // @ts-ignore FIXME
+                const componentName = getDisplayName(jsx);
+                const jsxComponentName = `<${componentName} ... />`;
+                Cypress.log({
+                    name: type,
+                    type: 'parent',
+                    message: [jsxComponentName],
+                    // @ts-ignore
+                    $el: el.children.item(0),
+                    consoleProps: () => {
+                        return {
+                            // @ts-ignore protect the use of jsx functional components use ReactNode
+                            props: jsx === null || jsx === void 0 ? void 0 : jsx.props,
+                            description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
+                            home: 'https://github.com/cypress-io/cypress',
+                        };
+                    },
+                });
+            }
+        }));
         // Bluebird types are terrible. I don't think the return type can be carried without this cast
     });
 };
@@ -290,6 +192,8 @@ const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions)
  *
  * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
  * or people writing adapters for third-party, custom adapters.
+ *
+ * @param {UnmountArgs} options used during unmounting
  */
 const makeUnmountFn = (options) => {
     return cy.then(() => {
@@ -558,7 +462,31 @@ const cleanup = () => {
     }
     return false;
 };
+/**
+ * Mounts a React component into the DOM.
+ * @param {import('react').JSX.Element} jsx The React component to mount.
+ * @param {MountOptions} options Options to pass to the mount function.
+ * @param {string} rerenderKey A key to use to force a rerender.
+ *
+ * @example
+ * import { mount } from '@cypress/react'
+ * import { Stepper } from './Stepper'
+ *
+ * it('mounts', () => {
+ *   mount(<StepperComponent />)
+ *   cy.get('[data-cy=increment]').click()
+ *   cy.get('[data-cy=counter]').should('have.text', '1')
+ * }
+ *
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
+ *
+ * @returns {Cypress.Chainable<MountReturn>} The mounted component.
+ */
 function mount(jsx, options = {}, rerenderKey) {
+    // 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 = {
         reactDom: ReactDOM,
         render: (reactComponent, el) => {
@@ -567,13 +495,21 @@ function mount(jsx, options = {}, rerenderKey) {
             }
             return root.render(reactComponent);
         },
-        unmount,
+        unmount: internalUnmount,
         cleanup,
     };
     return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
 }
-function unmount(options = { log: true }) {
+function internalUnmount(options = { log: true }) {
     return makeUnmountFn(options);
+}
+/**
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+function unmount(options = { log: true }) {
+    // @ts-expect-error - undocumented API
+    Cypress.utils.throwErrByPath('mount.unmount');
 }
 
-export { mount, unmount };
+export { getContainerEl$1 as getContainerEl, mount, unmount };

package/react18/dist/index.d.ts

@@ -1,6 +1,78 @@
-/// <reference types="cypress" />
-/// <reference types="cypress" />
-import React from 'react';
-import type { MountOptions, UnmountArgs } from '@cypress/react';
-export declare function mount(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<import("@cypress/react").MountReturn>;
-export declare function unmount(options?: UnmountArgs): Cypress.Chainable<undefined>;
+/// <reference types="cypress" />
+
+/// <reference types="cypress" />
+import React__default from 'react';
+import * as react_dom from 'react-dom';
+
+interface UnmountArgs {
+    log: boolean;
+    boundComponentMessage?: string;
+}
+declare type MountOptions = Partial<MountReactComponentOptions>;
+interface MountReactComponentOptions {
+    ReactDom: typeof react_dom;
+    /**
+     * Log the mounting command into Cypress Command Log,
+     * true by default.
+     */
+    log: boolean;
+    /**
+     * Render component in React [strict mode](https://reactjs.org/docs/strict-mode.html)
+     * It activates additional checks and warnings for child components.
+     */
+    strict: boolean;
+}
+interface MountReturn {
+    /**
+     * The component that was rendered.
+     */
+    component: React__default.ReactNode;
+    /**
+     * Rerenders the specified component with new props. This allows testing of components that store state (`setState`)
+     * or have asynchronous updates (`useEffect`, `useLayoutEffect`).
+     */
+    rerender: (component: React__default.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
+    /**
+     * Removes the mounted component.
+     *
+     * Removed as of Cypress 11.0.0.
+     * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+     */
+    unmount: (payload: UnmountArgs) => void;
+}
+
+/**
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
+ */
+declare const getContainerEl: () => HTMLElement;
+
+/**
+ * Mounts a React component into the DOM.
+ * @param {import('react').JSX.Element} jsx The React component to mount.
+ * @param {MountOptions} options Options to pass to the mount function.
+ * @param {string} rerenderKey A key to use to force a rerender.
+ *
+ * @example
+ * import { mount } from '@cypress/react'
+ * import { Stepper } from './Stepper'
+ *
+ * it('mounts', () => {
+ *   mount(<StepperComponent />)
+ *   cy.get('[data-cy=increment]').click()
+ *   cy.get('[data-cy=counter]').should('have.text', '1')
+ * }
+ *
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
+ *
+ * @returns {Cypress.Chainable<MountReturn>} The mounted component.
+ */
+declare function mount(jsx: React__default.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<MountReturn>;
+/**
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+declare function unmount(options?: UnmountArgs): void;
+
+export { getContainerEl, mount, unmount };

package/react18/package.json

@@ -10,6 +10,7 @@
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "devDependencies": {
+    "@cypress/mount-utils": "0.0.0-development",
     "@cypress/react": "0.0.0-development",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",

package/svelte/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [@cypress/svelte-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/svelte-v1.0.2...@cypress/svelte-v2.0.0) (2022-11-07)
+
+
+### Bug Fixes
+
+* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
+* remove some CT functions and props ([#24419](https://github.com/cypress-io/cypress/issues/24419)) ([294985f](https://github.com/cypress-io/cypress/commit/294985f8b3e0fa00ed66d25f88c8814603766074))
+
+
+### BREAKING CHANGES
+
+* remove last mounted component upon subsequent mount calls of mount
+
+# [@cypress/svelte-v1.0.2](https://github.com/cypress-io/cypress/compare/@cypress/svelte-v1.0.1...@cypress/svelte-v1.0.2) (2022-11-01)
+
+
+### Bug Fixes
+
+* Hovering over mount in command log does not show component in AUT ([#24346](https://github.com/cypress-io/cypress/issues/24346)) ([355d210](https://github.com/cypress-io/cypress/commit/355d2101d38ea4d1e93b9c571cf77babab2bbbfc))
+
 # [@cypress/svelte-v1.0.1](https://github.com/cypress-io/cypress/compare/@cypress/svelte-v1.0.0...@cypress/svelte-v1.0.1) (2022-09-29)
 
 

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

@@ -10,6 +10,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const ROOT_SELECTOR = '[data-cy-root]';
+/**
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
+ */
 const getContainerEl = () => {
     const el = document.querySelector(ROOT_SELECTOR);
     if (el) {
@@ -17,122 +22,19 @@ const getContainerEl = () => {
     }
     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);
+function checkForRemovedStyleOptions(mountingOptions) {
+    for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
+        if (mountingOptions[key]) {
+            Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
         }
-    });
-}
-/**
- * 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.
+ * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
+ * @param optionalCallback Callback to be called before the next test runs
  */
-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
+    // 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') {
@@ -147,7 +49,6 @@ function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
 
@@ -179,11 +80,15 @@ const getComponentDisplayName = (Component) => {
  *   mount(Counter, { props: { count: 42 } })
  *   cy.get('button').contains(42)
  * })
+ *
+ * @see {@link https://on.cypress.io/mounting-svelte} for more details.
  */
 function mount(Component, options = {}) {
+    checkForRemovedStyleOptions(options);
     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);
         const ComponentConstructor = (Component.default || Component);
         componentInstance = new ComponentConstructor(Object.assign({ target }, options));
         // by waiting, we are delaying test execution for the next tick of event loop
@@ -194,7 +99,7 @@ function mount(Component, options = {}) {
                 Cypress.log({
                     name: 'mount',
                     message: [mountMessage],
-                }).snapshot('mounted').end();
+                });
             }
         })
             .wrap({ component: componentInstance }, { log: false });