cypress 10.11.0 → 11.0.0

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

@@ -36,17 +36,16 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-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.
@@ -71,16 +70,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) {
@@ -88,122 +86,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') {
@@ -218,19 +113,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
@@ -245,17 +130,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;
@@ -276,38 +158,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
     });
 };
@@ -317,6 +205,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(() => {
@@ -916,87 +806,70 @@ 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["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__default["default"],
         render: (reactComponent, el, reactDomToUse) => {
             lastReactDom = (reactDomToUse || ReactDOM__default["default"]);
             return lastReactDom.render(reactComponent, el);
         },
-        unmount,
+        unmount: internalUnmount,
         cleanup,
     };
     return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM__default["default"] }, 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__namespace.createElement(TestHook, {
-        callback: hookFn,
-        onError: setError,
-        children: setValue,
-    });
-    return mount(componentTest).then(() => result);
+    // @ts-expect-error - internal API
+    Cypress.utils.throwErrByPath('mount.mount_hook');
 };
 
 exports.createMount = createMount;
+exports.getContainerEl = getContainerEl;
 exports.makeMountFn = makeMountFn;
 exports.makeUnmountFn = makeUnmountFn;
 exports.mount = mount;