cypress 13.10.0 → 13.12.0

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

@@ -9,41 +9,41 @@ import * as React from 'react';
 import React__default from 'react';
 import ReactDOM from 'react-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(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.
-    // It's only safe to use for our purposes if it's a string.
-    // github.com/facebook/react-devtools/issues/803
-    if (typeof type.displayName === 'string') {
-        displayName = type.displayName;
-    }
-    if (!displayName) {
-        displayName = type.name || fallbackName;
-    }
-    // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
-    // We need displayName with module name for error reports but it clutters the DevTools.
-    const match = displayName.match(/^(.*) \[from (.*)\]$/);
-    if (match) {
-        const componentName = match[1];
-        const moduleName = match[2];
-        if (componentName && moduleName) {
-            if (moduleName === componentName ||
-                moduleName.startsWith(`${componentName}.`)) {
-                displayName = componentName;
-            }
-        }
-    }
-    return displayName;
+/**
+ * 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(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.
+    // It's only safe to use for our purposes if it's a string.
+    // github.com/facebook/react-devtools/issues/803
+    if (typeof type.displayName === 'string') {
+        displayName = type.displayName;
+    }
+    if (!displayName) {
+        displayName = type.name || fallbackName;
+    }
+    // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
+    // We need displayName with module name for error reports but it clutters the DevTools.
+    const match = displayName.match(/^(.*) \[from (.*)\]$/);
+    if (match) {
+        const componentName = match[1];
+        const moduleName = match[2];
+        if (componentName && moduleName) {
+            if (moduleName === componentName ||
+                moduleName.startsWith(`${componentName}.`)) {
+                displayName = componentName;
+            }
+        }
+    }
+    return displayName;
 }
 
 const ROOT_SELECTOR = '[data-cy-root]';
@@ -95,141 +95,141 @@ function setupHooks(optionalCallback) {
     });
 }
 
-let mountCleanup;
-/**
- * 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.
- */
-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;
-    return cy
-        .then(() => {
-        var _a, _b, _c;
-        const reactDomToUse = internalMountOptions.reactDom;
-        const el = getContainerEl();
-        if (!el) {
-            throw new Error([
-                `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
-            ].join(' '));
-        }
-        const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey : 
-        // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
-        (((_c = (_b = (_a = Cypress === null || Cypress === void 0 ? void 0 : Cypress.mocha) === null || _a === void 0 ? void 0 : _a.getRunner()) === null || _b === void 0 ? void 0 : _b.test) === null || _c === void 0 ? void 0 : _c.title) || '') + Math.random();
-        const props = {
-            key,
-        };
-        const reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
-        // since we always surround the component with a fragment
-        // let's get back the original component
-        const userComponent = reactComponent.props.children;
-        internalMountOptions.render(reactComponent, el, reactDomToUse);
-        return (cy.wrap(userComponent, { log: false })
-            .then(() => {
-            return cy.wrap({
-                component: userComponent,
-                rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
-                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 })
-            .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
-    });
-};
-/**
- * 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
- */
-const makeUnmountFn = (options) => {
-    return cy.then(() => {
-        var _a;
-        const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
-        if (wasUnmounted && options.log) {
-            Cypress.log({
-                name: 'unmount',
-                type: 'parent',
-                message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
-                consoleProps: () => {
-                    return {
-                        description: 'Unmounts React component',
-                        parent: getContainerEl().parentNode,
-                        home: 'https://github.com/cypress-io/cypress',
-                    };
-                },
-            });
-        }
-    });
-};
-// Cleanup before each run
-// NOTE: we cannot use unmount here because
-// we are not in the context of a test
-const preMountCleanup = () => {
-    mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
-};
-const _mount = (jsx, options = {}) => makeMountFn('mount', jsx, options);
-const createMount = (defaultOptions) => {
-    return (element, options) => {
-        return _mount(element, Object.assign(Object.assign({}, defaultOptions), 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
-// it is required to unmount component in beforeEach hook in order to provide a clean state inside test
-// because `mount` can be called after some preparation that can side effect unmount
-// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
+let mountCleanup;
+/**
+ * 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.
+ */
+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;
+    return cy
+        .then(() => {
+        var _a, _b, _c;
+        const reactDomToUse = internalMountOptions.reactDom;
+        const el = getContainerEl();
+        if (!el) {
+            throw new Error([
+                `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
+            ].join(' '));
+        }
+        const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey : 
+        // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
+        (((_c = (_b = (_a = Cypress === null || Cypress === void 0 ? void 0 : Cypress.mocha) === null || _a === void 0 ? void 0 : _a.getRunner()) === null || _b === void 0 ? void 0 : _b.test) === null || _c === void 0 ? void 0 : _c.title) || '') + Math.random();
+        const props = {
+            key,
+        };
+        const reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
+        // since we always surround the component with a fragment
+        // let's get back the original component
+        const userComponent = reactComponent.props.children;
+        internalMountOptions.render(reactComponent, el, reactDomToUse);
+        return (cy.wrap(userComponent, { log: false })
+            .then(() => {
+            return cy.wrap({
+                component: userComponent,
+                rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
+                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 })
+            .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
+    });
+};
+/**
+ * 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
+ */
+const makeUnmountFn = (options) => {
+    return cy.then(() => {
+        var _a;
+        const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
+        if (wasUnmounted && options.log) {
+            Cypress.log({
+                name: 'unmount',
+                type: 'parent',
+                message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
+                consoleProps: () => {
+                    return {
+                        description: 'Unmounts React component',
+                        parent: getContainerEl().parentNode,
+                        home: 'https://github.com/cypress-io/cypress',
+                    };
+                },
+            });
+        }
+    });
+};
+// Cleanup before each run
+// NOTE: we cannot use unmount here because
+// we are not in the context of a test
+const preMountCleanup = () => {
+    mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
+};
+const _mount = (jsx, options = {}) => makeMountFn('mount', jsx, options);
+const createMount = (defaultOptions) => {
+    return (element, options) => {
+        return _mount(element, Object.assign(Object.assign({}, defaultOptions), 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
+// it is required to unmount component in beforeEach hook in order to provide a clean state inside test
+// because `mount` can be called after some preparation that can side effect unmount
+// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
 setupHooks(preMountCleanup);
 
 const debug = (
@@ -848,75 +848,75 @@ var semver = SemVer;
 const major = (a, loose) => new semver(a, loose).major;
 var major_1 = major;
 
-let lastReactDom;
-const cleanup = () => {
-    if (lastReactDom) {
-        const root = getContainerEl();
-        lastReactDom.unmountComponentAtNode(root);
-        return true;
-    }
-    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: internalUnmount,
-        cleanup,
-    };
-    return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
-}
-/**
- * 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');
+let lastReactDom;
+const cleanup = () => {
+    if (lastReactDom) {
+        const root = getContainerEl();
+        lastReactDom.unmountComponentAtNode(root);
+        return true;
+    }
+    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: internalUnmount,
+        cleanup,
+    };
+    return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
+}
+/**
+ * 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');
 }
 
-/**
- * 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) => {
-    // @ts-expect-error - internal API
-    Cypress.utils.throwErrByPath('mount.mount_hook');
+/**
+ * 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) => {
+    // @ts-expect-error - internal API
+    Cypress.utils.throwErrByPath('mount.mount_hook');
 };
 
 export { createMount, getContainerEl, makeMountFn, makeUnmountFn, mount, mountHook, unmount };

package/react/dist/index.d.ts

@@ -8,7 +8,7 @@ interface UnmountArgs {
     log: boolean;
     boundComponentMessage?: string;
 }
-declare type MountOptions = Partial<MountReactComponentOptions>;
+type MountOptions = Partial<MountReactComponentOptions>;
 interface MountReactComponentOptions {
     ReactDom: typeof react_dom;
     /**

package/react/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
     "@types/semver": "7.5.0",
-    "@vitejs/plugin-react": "4.0.0",
+    "@vitejs/plugin-react": "4.3.0",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
     "prop-types": "15.7.2",
@@ -27,8 +27,8 @@
     "react-router": "6.0.0-alpha.1",
     "react-router-dom": "6.0.0-alpha.1",
     "semver": "^7.5.3",
-    "typescript": "^4.7.4",
-    "vite": "4.5.2",
+    "typescript": "~5.4.5",
+    "vite": "5.2.11",
     "vite-plugin-require-transform": "1.0.12"
   },
   "peerDependencies": {