cypress 10.5.0 → 10.8.0

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

@@ -16,66 +16,39 @@ require('react-dom');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var cachedDisplayNames = new WeakMap();
+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) {
-    if (fallbackName === void 0) { fallbackName = 'Unknown'; }
-    var nameFromCache = cachedDisplayNames.get(type);
+function getDisplayName(type, fallbackName = 'Unknown') {
+    const nameFromCache = cachedDisplayNames.get(type);
     if (nameFromCache != null) {
         return nameFromCache;
     }
-    var displayName = null;
+    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
@@ -87,13 +60,13 @@ function getDisplayName(type, 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.
-    var match = displayName.match(/^(.*) \[from (.*)\]$/);
+    const match = displayName.match(/^(.*) \[from (.*)\]$/);
     if (match) {
-        var componentName = match[1];
-        var moduleName = match[2];
+        const componentName = match[1];
+        const moduleName = match[2];
         if (componentName && moduleName) {
             if (moduleName === componentName ||
-                moduleName.startsWith(componentName + ".")) {
+                moduleName.startsWith(`${componentName}.`)) {
                 displayName = componentName;
             }
         }
@@ -252,13 +225,13 @@ function setupHooks(optionalCallback) {
 /**
  * Inject custom style text or CSS file or 3rd party style resources
  */
-var injectStyles = function (options) {
-    return function () {
-        var el = getContainerEl();
+const injectStyles = (options) => {
+    return () => {
+        const el = getContainerEl();
         return injectStylesBeforeElement(options, document, el);
     };
 };
-var mountCleanup;
+let mountCleanup;
 /**
  * Create an `mount` function. Performs all the non-React-version specific
  * behavior related to mounting. The React-version-specific code
@@ -268,41 +241,40 @@ var mountCleanup;
  * 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.
  */
-var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOptions) {
-    if (options === void 0) { options = {}; }
+const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
     if (!internalMountOptions) {
         throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
     }
     mountCleanup = internalMountOptions.cleanup;
     // Get the display name property via the component constructor
     // @ts-ignore FIXME
-    var componentName = getDisplayName(jsx.type, options.alias);
-    var displayName = options.alias || componentName;
-    var jsxComponentName = "<" + componentName + " ... />";
-    var message = options.alias
-        ? jsxComponentName + " as \"" + options.alias + "\""
+    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(function () {
+        .then(() => {
         var _a, _b, _c;
-        var reactDomToUse = internalMountOptions.reactDom;
-        var el = getContainerEl();
+        const reactDomToUse = internalMountOptions.reactDom;
+        const el = getContainerEl();
         if (!el) {
             throw new Error([
-                "[@cypress/react] \uD83D\uDD25 Hmm, cannot find root element to mount the component. Searched for " + ROOT_SELECTOR,
+                `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
             ].join(' '));
         }
-        var key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey : 
+        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();
-        var props = {
-            key: key,
+        const props = {
+            key,
         };
-        var reactComponent = React__namespace.createElement(options.strict ? React__namespace.StrictMode : React__namespace.Fragment, props, jsx);
+        const reactComponent = React__namespace.createElement(options.strict ? React__namespace.StrictMode : React__namespace.Fragment, props, jsx);
         // since we always surround the component with a fragment
         // let's get back the original component
-        var userComponent = reactComponent.props.children;
+        const userComponent = reactComponent.props.children;
         internalMountOptions.render(reactComponent, el, reactDomToUse);
         if (options.log !== false) {
             Cypress.log({
@@ -311,7 +283,7 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
                 message: [message],
                 // @ts-ignore
                 $el: el.children.item(0),
-                consoleProps: function () {
+                consoleProps: () => {
                     return {
                         // @ts-ignore protect the use of jsx functional components use ReactNode
                         props: jsx.props,
@@ -325,10 +297,10 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
         // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
         cy.wrap(userComponent, { log: false })
             .as(displayName)
-            .then(function () {
+            .then(() => {
             return cy.wrap({
                 component: userComponent,
-                rerender: function (newComponent) { return makeMountFn('rerender', newComponent, options, key, internalMountOptions); },
+                rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
                 unmount: internalMountOptions.unmount,
             }, { log: false });
         })
@@ -346,16 +318,16 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
  * 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.
  */
-var makeUnmountFn = function (options) {
-    return cy.then(function () {
+const makeUnmountFn = (options) => {
+    return cy.then(() => {
         var _a;
-        var wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
+        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: function () {
+                consoleProps: () => {
                     return {
                         description: 'Unmounts React component',
                         parent: getContainerEl().parentNode,
@@ -369,7 +341,7 @@ var makeUnmountFn = function (options) {
 // Cleanup before each run
 // NOTE: we cannot use unmount here because
 // we are not in the context of a test
-var preMountCleanup = function () {
+const preMountCleanup = () => {
     mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
 };
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -603,29 +575,31 @@ createToken('GTE0', '^\\s*>=\\s*0\\.0\\.0\\s*$');
 createToken('GTE0PRE', '^\\s*>=\\s*0\\.0\\.0-0\\s*$');
 });
 
-var root;
-var cleanup = function () {
+// @ts-expect-error
+let root;
+const cleanup = () => {
     if (root) {
         root.unmount();
+        root = null;
         return true;
     }
     return false;
 };
-function mount(jsx, options, rerenderKey) {
-    if (options === void 0) { options = {}; }
-    var internalOptions = {
+function mount(jsx, options = {}, rerenderKey) {
+    const internalOptions = {
         reactDom: ReactDOM__default["default"],
-        render: function (reactComponent, el) {
-            root = ReactDOM__default["default"].createRoot(el);
+        render: (reactComponent, el) => {
+            if (!root) {
+                root = ReactDOM__default["default"].createRoot(el);
+            }
             return root.render(reactComponent);
         },
-        unmount: unmount,
-        cleanup: cleanup,
+        unmount,
+        cleanup,
     };
-    return makeMountFn('mount', jsx, __assign({ ReactDom: ReactDOM__default["default"] }, options), rerenderKey, internalOptions);
+    return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM__default["default"] }, options), rerenderKey, internalOptions);
 }
-function unmount(options) {
-    if (options === void 0) { options = { log: true }; }
+function unmount(options = { log: true }) {
     return makeUnmountFn(options);
 }
 

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

@@ -9,46 +9,19 @@ import ReactDOM from 'react-dom/client';
 import * as React from 'react';
 import 'react-dom';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var cachedDisplayNames = new WeakMap();
+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) {
-    if (fallbackName === void 0) { fallbackName = 'Unknown'; }
-    var nameFromCache = cachedDisplayNames.get(type);
+function getDisplayName(type, fallbackName = 'Unknown') {
+    const nameFromCache = cachedDisplayNames.get(type);
     if (nameFromCache != null) {
         return nameFromCache;
     }
-    var displayName = null;
+    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
@@ -60,13 +33,13 @@ function getDisplayName(type, 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.
-    var match = displayName.match(/^(.*) \[from (.*)\]$/);
+    const match = displayName.match(/^(.*) \[from (.*)\]$/);
     if (match) {
-        var componentName = match[1];
-        var moduleName = match[2];
+        const componentName = match[1];
+        const moduleName = match[2];
         if (componentName && moduleName) {
             if (moduleName === componentName ||
-                moduleName.startsWith(componentName + ".")) {
+                moduleName.startsWith(`${componentName}.`)) {
                 displayName = componentName;
             }
         }
@@ -225,13 +198,13 @@ function setupHooks(optionalCallback) {
 /**
  * Inject custom style text or CSS file or 3rd party style resources
  */
-var injectStyles = function (options) {
-    return function () {
-        var el = getContainerEl();
+const injectStyles = (options) => {
+    return () => {
+        const el = getContainerEl();
         return injectStylesBeforeElement(options, document, el);
     };
 };
-var mountCleanup;
+let mountCleanup;
 /**
  * Create an `mount` function. Performs all the non-React-version specific
  * behavior related to mounting. The React-version-specific code
@@ -241,41 +214,40 @@ var mountCleanup;
  * 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.
  */
-var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOptions) {
-    if (options === void 0) { options = {}; }
+const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
     if (!internalMountOptions) {
         throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
     }
     mountCleanup = internalMountOptions.cleanup;
     // Get the display name property via the component constructor
     // @ts-ignore FIXME
-    var componentName = getDisplayName(jsx.type, options.alias);
-    var displayName = options.alias || componentName;
-    var jsxComponentName = "<" + componentName + " ... />";
-    var message = options.alias
-        ? jsxComponentName + " as \"" + options.alias + "\""
+    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(function () {
+        .then(() => {
         var _a, _b, _c;
-        var reactDomToUse = internalMountOptions.reactDom;
-        var el = getContainerEl();
+        const reactDomToUse = internalMountOptions.reactDom;
+        const el = getContainerEl();
         if (!el) {
             throw new Error([
-                "[@cypress/react] \uD83D\uDD25 Hmm, cannot find root element to mount the component. Searched for " + ROOT_SELECTOR,
+                `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
             ].join(' '));
         }
-        var key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey : 
+        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();
-        var props = {
-            key: key,
+        const props = {
+            key,
         };
-        var reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
+        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
-        var userComponent = reactComponent.props.children;
+        const userComponent = reactComponent.props.children;
         internalMountOptions.render(reactComponent, el, reactDomToUse);
         if (options.log !== false) {
             Cypress.log({
@@ -284,7 +256,7 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
                 message: [message],
                 // @ts-ignore
                 $el: el.children.item(0),
-                consoleProps: function () {
+                consoleProps: () => {
                     return {
                         // @ts-ignore protect the use of jsx functional components use ReactNode
                         props: jsx.props,
@@ -298,10 +270,10 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
         // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
         cy.wrap(userComponent, { log: false })
             .as(displayName)
-            .then(function () {
+            .then(() => {
             return cy.wrap({
                 component: userComponent,
-                rerender: function (newComponent) { return makeMountFn('rerender', newComponent, options, key, internalMountOptions); },
+                rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
                 unmount: internalMountOptions.unmount,
             }, { log: false });
         })
@@ -319,16 +291,16 @@ var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOption
  * 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.
  */
-var makeUnmountFn = function (options) {
-    return cy.then(function () {
+const makeUnmountFn = (options) => {
+    return cy.then(() => {
         var _a;
-        var wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
+        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: function () {
+                consoleProps: () => {
                     return {
                         description: 'Unmounts React component',
                         parent: getContainerEl().parentNode,
@@ -342,7 +314,7 @@ var makeUnmountFn = function (options) {
 // Cleanup before each run
 // NOTE: we cannot use unmount here because
 // we are not in the context of a test
-var preMountCleanup = function () {
+const preMountCleanup = () => {
     mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
 };
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -576,29 +548,31 @@ createToken('GTE0', '^\\s*>=\\s*0\\.0\\.0\\s*$');
 createToken('GTE0PRE', '^\\s*>=\\s*0\\.0\\.0-0\\s*$');
 });
 
-var root;
-var cleanup = function () {
+// @ts-expect-error
+let root;
+const cleanup = () => {
     if (root) {
         root.unmount();
+        root = null;
         return true;
     }
     return false;
 };
-function mount(jsx, options, rerenderKey) {
-    if (options === void 0) { options = {}; }
-    var internalOptions = {
+function mount(jsx, options = {}, rerenderKey) {
+    const internalOptions = {
         reactDom: ReactDOM,
-        render: function (reactComponent, el) {
-            root = ReactDOM.createRoot(el);
+        render: (reactComponent, el) => {
+            if (!root) {
+                root = ReactDOM.createRoot(el);
+            }
             return root.render(reactComponent);
         },
-        unmount: unmount,
-        cleanup: cleanup,
+        unmount,
+        cleanup,
     };
-    return makeMountFn('mount', jsx, __assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
+    return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
 }
-function unmount(options) {
-    if (options === void 0) { options = { log: true }; }
+function unmount(options = { log: true }) {
     return makeUnmountFn(options);
 }
 

package/react18/dist/index.d.ts

@@ -1,4 +1,5 @@
 /// <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>;

package/react18/package.json

@@ -4,7 +4,7 @@
   "description": "Test React components using Cypress",
   "main": "dist/cypress-react.cjs.js",
   "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
@@ -20,7 +20,7 @@
     "react-dom": "^16",
     "rollup": "^2.38.5",
     "rollup-plugin-typescript2": "^0.29.0",
-    "typescript": "^4.2.3"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "@types/react": "^18",

package/svelte/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @cypress/svelte-v1.0.0 (2022-08-30)
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))

package/svelte/README.md

@@ -0,0 +1,83 @@
+# @cypress/svelte
+
+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  |
+
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+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/master/LICENSE)
+
+This project is licensed under the terms of the [MIT license](/LICENSE).
+
+## [Changelog](./CHANGELOG.md)