cypress 10.11.0 → 11.0.1

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/README.md

@@ -2,69 +2,7 @@
 
 Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
 
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-svelte#Configuring-Component-Testing) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be used for advanced use-cases.
-
-## Install
-
-- Requires Svelte >= 3
-- Requires Cypress v10.7.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-
-```sh
-npm install --save-dev @cypress/svelte
-```
-
-## Run
-
-Open cypress test runner
-```
-npx cypress open --component
-```
-
-If you need to run test in CI
-```
-npx cypress run --component
-```
-
-For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
-
-## Example
-
-```js
-import { mount } from '@cypress/svelte'
-import HelloWorld from './HelloWorld.svelte'
-
-describe('HelloWorld component', () => {
-  it('works', () => {
-    mount(HelloWorld)
-    // now use standard Cypress commands
-    cy.contains('Hello World!').should('be.visible')
-  })
-})
-```
-
-## Options
-
-In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
-
-```js
-// src/HelloWorld.svelte
-import './styles/main.css'
-import HelloWorld from './HelloWorld.svelte'
-
-it('looks right', () => {
-  // styles are applied
-  mount(HelloWorld)
-})
-```
-
-> Note: Global styles can be imported in your component support file, allowing the styles to apply to all mounted components.
-
-## Compatibility
-
-| @cypress/svelte | cypress |
-| -------------- | ------- |
-| >= v1          | >= v10  |
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
 
 ## Development
 
@@ -74,10 +12,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
 
 Run `yarn test` to execute headless Cypress tests.
 
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
 ## [Changelog](./CHANGELOG.md)