cypress 10.11.0 → 11.0.1

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

@@ -9,17 +9,16 @@ import * as React from 'react';
 import React__default from 'react';
 import ReactDOM from 'react-dom';
 
-const cachedDisplayNames = new WeakMap();
 /**
  * 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 +43,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 +59,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);
+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);
         }
-    });
-    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.
+ * 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 +86,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 +103,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 +131,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 +178,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(() => {
@@ -889,84 +779,66 @@ const cleanup = () => {
     }
     return false;
 };
+/**
+ * Mounts a React component into the DOM.
+ * @param jsx {React.ReactNode} The React component to mount.
+ * @param options {MountOptions} [options={}] options to pass to the mount function.
+ * @param rerenderKey {string} [rerenderKey] A key to use to force a rerender.
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
+ * @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')
+ * }
+ */
 function mount(jsx, options = {}, rerenderKey) {
     if (major_1(React__default.version) === 18) {
         const message = '[cypress/react]: You are using `cypress/react`, which is designed for React <= 17. Consider changing to `cypress/react18`, which is designed for React 18.';
         console.error(message);
         Cypress.log({ name: 'warning', message });
     }
+    // Remove last mounted component if cy.mount is called more than once in a test
+    cleanup();
     const internalOptions = {
         reactDom: ReactDOM,
         render: (reactComponent, el, reactDomToUse) => {
             lastReactDom = (reactDomToUse || ReactDOM);
             return lastReactDom.render(reactComponent, el);
         },
-        unmount,
+        unmount: internalUnmount,
         cleanup,
     };
     return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
 }
-function unmount(options = { log: true }) {
+/**
+ * Unmounts the component from the DOM.
+ * @internal
+ * @param options - Options for unmounting.
+ */
+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');
 }
 
-// mounting hooks inside a test component mostly copied from
-// https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
-function resultContainer() {
-    let value = null;
-    let error = null;
-    const resolvers = [];
-    const result = {
-        get current() {
-            if (error) {
-                throw error;
-            }
-            return value;
-        },
-        get error() {
-            return error;
-        },
-    };
-    const updateResult = (val, err = null) => {
-        value = val;
-        error = err;
-        resolvers.splice(0, resolvers.length).forEach((resolve) => resolve());
-    };
-    return {
-        result,
-        addResolver: (resolver) => {
-            resolvers.push(resolver);
-        },
-        setValue: (val) => updateResult(val),
-        setError: (err) => updateResult(undefined, err),
-    };
-}
-function TestHook({ callback, onError, children }) {
-    try {
-        children(callback());
-    }
-    catch (err) {
-        if ('then' in err) {
-            throw err;
-        }
-        else {
-            onError(err);
-        }
-    }
-    return null;
-}
 /**
  * Mounts a React hook function in a test component for testing.
- *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 const mountHook = (hookFn) => {
-    const { result, setValue, setError } = resultContainer();
-    const componentTest = React.createElement(TestHook, {
-        callback: hookFn,
-        onError: setError,
-        children: setValue,
-    });
-    return mount(componentTest).then(() => result);
+    // @ts-expect-error - internal API
+    Cypress.utils.throwErrByPath('mount.mount_hook');
 };
 
-export { createMount, makeMountFn, makeUnmountFn, mount, mountHook, unmount };
+export { createMount, getContainerEl, makeMountFn, makeUnmountFn, mount, mountHook, unmount };

package/react/dist/index.d.ts

@@ -1,4 +1,111 @@
-export * from './createMount';
-export * from './mount';
-export * from './mountHook';
-export * from './types';
+/// <reference types="cypress" />
+
+import * as React from 'react';
+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 InternalMountOptions {
+    reactDom: typeof react_dom;
+    render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof react_dom) => void;
+    unmount: (options: UnmountArgs) => void;
+    cleanup: () => 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;
+}
+
+/**
+ * Create an `mount` function. Performs all the non-React-version specific
+ * behavior related to mounting. The React-version-specific code
+ * is injected. This helps us to maintain a consistent public API
+ * and handle breaking changes in React's rendering API.
+ *
+ * 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.
+ */
+declare const makeMountFn: (type: 'mount' | 'rerender', jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string, internalMountOptions?: InternalMountOptions) => globalThis.Cypress.Chainable<MountReturn>;
+/**
+ * Create an `unmount` function. Performs all the non-React-version specific
+ * behavior related to unmounting.
+ *
+ * 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
+ */
+declare const makeUnmountFn: (options: UnmountArgs) => Cypress.Chainable<undefined>;
+declare const createMount: (defaultOptions: MountOptions) => (element: React.ReactElement, options?: MountOptions) => Cypress.Chainable<MountReturn>;
+
+/**
+ * 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 jsx {React.ReactNode} The React component to mount.
+ * @param options {MountOptions} [options={}] options to pass to the mount function.
+ * @param rerenderKey {string} [rerenderKey] A key to use to force a rerender.
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
+ * @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')
+ * }
+ */
+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?: {
+    log: boolean;
+}): void;
+
+/**
+ * Mounts a React hook function in a test component for testing.
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+declare const mountHook: <T>(hookFn: (...args: any[]) => T) => void;
+
+export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount, mountHook, unmount };

package/react18/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [@cypress/react18-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.1...@cypress/react18-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/react18-v1.1.1](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.0...@cypress/react18-v1.1.1) (2022-10-13)
 
 

package/react18/README.md

@@ -0,0 +1,7 @@
+# @cypress/react18
+
+Mount React 18 components in the open source [Cypress.io](https://www.cypress.io/) test runner
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react18` should only be done for advanced use-cases.
+
+## [Changelog](./CHANGELOG.md)