cypress 10.11.0 → 11.0.1

package/mount-utils/dist/index.d.ts

@@ -1,54 +1,40 @@
+export declare const ROOT_SELECTOR = "[data-cy-root]";
 /**
- * Additional styles to inject into the document.
- * A component might need 3rd party libraries from CDN,
- * local CSS files and custom styles.
+ * Gets the root element used to mount the component.
+ * @returns {HTMLElement} The root element
+ * @throws {Error} If the root element is not found
  */
-export interface StyleOptions {
-    /**
-     * Creates <link href="..." /> element for each stylesheet
-     * @alias stylesheet
-     */
-    stylesheets: string | string[];
-    /**
-     * Creates <link href="..." /> element for each stylesheet
-     * @alias stylesheets
-     */
-    stylesheet: string | string[];
-    /**
-     * Creates <style>...</style> element and inserts given CSS.
-     * @alias styles
-     */
-    style: string | string[];
-    /**
-     * Creates <style>...</style> element for each given CSS text.
-     * @alias style
-     */
-    styles: string | string[];
-    /**
-     * Loads each file and creates a <style>...</style> element
-     * with the loaded CSS
-     * @alias cssFile
-     */
-    cssFiles: string | string[];
-    /**
-     * Single CSS file to load into a <style></style> element
-     * @alias cssFile
-     */
-    cssFile: string | string[];
-}
-export declare const ROOT_SELECTOR = "[data-cy-root]";
 export declare const getContainerEl: () => HTMLElement;
+export declare function checkForRemovedStyleOptions(mountingOptions: Record<string, any>): void;
+/**
+ * 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
+ */
+export declare function setupHooks(optionalCallback?: Function): void;
 /**
  * Remove any style or extra link elements from the iframe placeholder
  * left from any previous test
  *
+ * Removed as of Cypress 11.0.0
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 export declare function cleanupStyles(): void;
+/**
+ * Additional styles to inject into the document.
+ * A component might need 3rd party libraries from CDN,
+ * local CSS files and custom styles.
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+export declare type StyleOptions = unknown;
 /**
  * Injects custom style text or CSS file or 3rd party style resources
  * into the given document.
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
  */
 export declare const injectStylesBeforeElement: (options: Partial<StyleOptions & {
     log: boolean;
-}>, document: Document, el: HTMLElement | null) => HTMLElement;
-export declare function setupHooks(optionalCallback?: Function): void;
+}>, document: Document, el: HTMLElement | null) => void;

package/mount-utils/dist/index.js

@@ -1,4 +1,9 @@
 export 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
+ */
 export const getContainerEl = () => {
     const el = document.querySelector(ROOT_SELECTOR);
     if (el) {
@@ -6,122 +11,19 @@ export 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
- *
- */
-export function cleanupStyles() {
-    const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
-    styles.forEach((styleElement) => {
-        if (styleElement.parentElement) {
-            styleElement.parentElement.removeChild(styleElement);
+export 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
  */
-export 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);
-};
 export 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') {
@@ -136,6 +38,25 @@ export function setupHooks(optionalCallback) {
     // @ts-ignore
     Cypress.on('test:before:run', () => {
         optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
-        cleanupStyles();
     });
 }
+/**
+ * Remove any style or extra link elements from the iframe placeholder
+ * left from any previous test
+ *
+ * Removed as of Cypress 11.0.0
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+export function cleanupStyles() {
+    Cypress.utils.throwErrByPath('mount.cleanup_styles');
+}
+/**
+ * Injects custom style text or CSS file or 3rd party style resources
+ * into the given document.
+ *
+ * Removed as of Cypress 11.0.0.
+ * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
+ */
+export const injectStylesBeforeElement = (options, document, el) => {
+    Cypress.utils.throwErrByPath('mount.inject_styles_before_element');
+};

package/mount-utils/package.json

@@ -15,6 +15,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "rollup": "^2.38.5",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.7.4"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.11.0",
+  "version": "11.0.1",
   "main": "index.js",
   "scripts": {
     "postinstall": "node index.js --exec install",
@@ -118,8 +118,8 @@
   },
   "buildInfo": {
     "commitBranch": "develop",
-    "commitSha": "75cce8187c5b888151bf06748ec03d7abf6ddfd5",
-    "commitDate": "2022-10-24T23:05:58.000Z",
+    "commitSha": "e9e8cadda4fb14d601079018b57425b221a005d9",
+    "commitDate": "2022-11-10T02:43:03.000Z",
     "stable": true
   },
   "description": "Cypress is a next generation front end testing tool built for the modern web",

package/react/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [@cypress/react-v7.0.1](https://github.com/cypress-io/cypress/compare/@cypress/react-v7.0.0...@cypress/react-v7.0.1) (2022-11-08)
+
+
+### Bug Fixes
+
+* make component derived info not throw ([#24571](https://github.com/cypress-io/cypress/issues/24571)) ([838dd4f](https://github.com/cypress-io/cypress/commit/838dd4fa2e0ec56633d0af2faf10a47d190b5594))
+
+# [@cypress/react-v7.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.2.1...@cypress/react-v7.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/react-v6.2.1](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.2.0...@cypress/react-v6.2.1) (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/react-v6.2.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.1.1...@cypress/react-v6.2.0) (2022-08-30)
 
 

package/react/README.md

@@ -1,107 +1,8 @@
 # @cypress/react
 
-Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
-
-> **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/quickstart-react#Configuring-Component-Testing) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be used for advanced use-cases.
-
-## Install
-
-- Requires Cypress v7.0.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-
-```sh
-npm install --save-dev @cypress/react
-```
-
-## 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).
-
-## API
-
-- `mount` is the most important function, allows to mount a given React component as a mini web application and interact with it using Cypress commands
-- `createMount` factory function that creates new `mount` function with default options
-- `unmount` removes previously mounted component, mostly useful to test how the component cleans up after itself
-- `mountHook` mounts a given React Hook in a test component for full testing, see `hooks` example
-
-## Examples
-
-```js
-import React from 'react'
-import { mount } from '@cypress/react'
-import { HelloWorld } from './hello-world.jsx'
-describe('HelloWorld component', () => {
-  it('works', () => {
-    mount(<HelloWorld />)
-    // now use standard Cypress commands
-    cy.contains('Hello World!').should('be.visible')
-  })
-})
-```
-
-Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
-
-## 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/Footer.spec.js
-import './styles/main.css'
-import Footer from './Footer'
-it('looks right', () => {
-  // styles are applied
-  mount(<Footer />)
-})
-```
-
-### Extra styles
-
-You can pass additional styles, css files and external stylesheets to load, see [docs/styles.md](./docs/styles.md) for the full list of options.
-
-```js
-const todo = {
-  id: '123',
-  title: 'Write more tests',
-}
-mount(<Todo todo={todo} />, {
-  stylesheets: [
-    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
-  ],
-})
-```
-
-You may also specify the `ReactDOM` package to use. This can be useful in complex monorepo setups that have different versions of React and React DOM installed. If you see an error relating to [mismatching versions of React or React DOM](https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom), this may be the solution. You can do this using the `ReactDom` option:
-
-```jsx
-// if you have multiple versions of ReactDom in your monorepo
-import ReactDom from 'react-dom'
-
-mount(<Todo todo={todo} />, {
-  stylesheets: [
-    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
-  ],
-  ReactDom
-})
-```
-
-## Compatibility
-
-| @cypress/react | cypress |
-| -------------- | ------- |
-| <= v5          | <= v9   |
-| >= v6          | >= v10  |
+Mount React 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/react` should only be done for advanced use-cases.
 ## Development
 
 Run `yarn build` to compile and sync packages to the `cypress` cli package.
@@ -110,10 +11,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)