cypress 13.17.0 → 14.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/angular/README.md +5 -0
  2. package/angular/angular/README.md +5 -0
  3. package/angular/angular/dist/index.d.ts +11 -2
  4. package/angular/angular/dist/index.js +944 -4
  5. package/angular/angular/package.json +16 -9
  6. package/angular/dist/index.d.ts +11 -2
  7. package/angular/dist/index.js +944 -4
  8. package/angular/package.json +16 -9
  9. package/lib/cli.js +1 -30
  10. package/lib/exec/spawn.js +29 -7
  11. package/mount-utils/dist/index.d.ts +0 -28
  12. package/mount-utils/dist/index.js +0 -27
  13. package/mount-utils/mount-utils/dist/index.d.ts +0 -28
  14. package/mount-utils/mount-utils/dist/index.js +0 -27
  15. package/package.json +5 -23
  16. package/react/README.md +5 -0
  17. package/react/dist/cypress-react.cjs.js +21 -676
  18. package/react/dist/cypress-react.esm-bundler.js +22 -676
  19. package/react/dist/index.d.ts +13 -30
  20. package/react/package.json +13 -15
  21. package/react/react/README.md +5 -0
  22. package/react/react/dist/cypress-react.cjs.js +21 -676
  23. package/react/react/dist/cypress-react.esm-bundler.js +22 -676
  24. package/react/react/dist/index.d.ts +13 -30
  25. package/react/react/package.json +13 -15
  26. package/svelte/README.md +6 -2
  27. package/svelte/dist/cypress-svelte.cjs.js +12 -12
  28. package/svelte/dist/cypress-svelte.esm-bundler.js +12 -12
  29. package/svelte/dist/index.d.ts +8 -179
  30. package/svelte/package.json +2 -2
  31. package/svelte/svelte/README.md +6 -2
  32. package/svelte/svelte/dist/cypress-svelte.cjs.js +12 -12
  33. package/svelte/svelte/dist/cypress-svelte.esm-bundler.js +12 -12
  34. package/svelte/svelte/dist/index.d.ts +8 -179
  35. package/svelte/svelte/package.json +2 -2
  36. package/types/cypress.d.ts +32 -49
  37. package/types/net-stubbing.d.ts +2 -7
  38. package/vue/dist/cypress-vue.cjs.js +380 -275
  39. package/vue/dist/cypress-vue.esm-bundler.js +382 -276
  40. package/vue/dist/index.d.ts +61 -78
  41. package/vue/package.json +2 -5
  42. package/vue/vue/dist/cypress-vue.cjs.js +380 -275
  43. package/vue/vue/dist/cypress-vue.esm-bundler.js +382 -276
  44. package/vue/vue/dist/index.d.ts +61 -78
  45. package/vue/vue/package.json +2 -5
  46. package/angular-signals/README.md +0 -11
  47. package/angular-signals/angular-signals/README.md +0 -11
  48. package/angular-signals/angular-signals/dist/index.d.ts +0 -136
  49. package/angular-signals/angular-signals/dist/index.js +0 -1861
  50. package/angular-signals/angular-signals/package.json +0 -74
  51. package/angular-signals/dist/index.d.ts +0 -136
  52. package/angular-signals/dist/index.js +0 -1861
  53. package/angular-signals/package.json +0 -74
  54. package/react18/README.md +0 -7
  55. package/react18/dist/cypress-react.cjs.js +0 -597
  56. package/react18/dist/cypress-react.esm-bundler.js +0 -574
  57. package/react18/dist/index.d.ts +0 -78
  58. package/react18/package.json +0 -71
  59. package/react18/react18/README.md +0 -7
  60. package/react18/react18/dist/cypress-react.cjs.js +0 -597
  61. package/react18/react18/dist/cypress-react.esm-bundler.js +0 -574
  62. package/react18/react18/dist/index.d.ts +0 -78
  63. package/react18/react18/package.json +0 -71
  64. package/vue2/README.md +0 -7
  65. package/vue2/dist/cypress-vue2.cjs.js +0 -20045
  66. package/vue2/dist/cypress-vue2.esm-bundler.js +0 -20042
  67. package/vue2/dist/index.d.ts +0 -207
  68. package/vue2/package.json +0 -65
  69. package/vue2/vue2/README.md +0 -7
  70. package/vue2/vue2/dist/cypress-vue2.cjs.js +0 -20045
  71. package/vue2/vue2/dist/cypress-vue2.esm-bundler.js +0 -20042
  72. package/vue2/vue2/dist/index.d.ts +0 -207
  73. package/vue2/vue2/package.json +0 -65
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  import React__default from 'react';
5
- import * as react_dom from 'react-dom';
5
+ import * as react_dom_client from 'react-dom/client';
6
6
 
7
7
  interface UnmountArgs {
8
8
  log: boolean;
@@ -10,7 +10,7 @@ interface UnmountArgs {
10
10
  }
11
11
  type MountOptions = Partial<MountReactComponentOptions>;
12
12
  interface MountReactComponentOptions {
13
- ReactDom: typeof react_dom;
13
+ ReactDom: typeof react_dom_client;
14
14
  /**
15
15
  * Log the mounting command into Cypress Command Log,
16
16
  * true by default.
@@ -23,8 +23,8 @@ interface MountReactComponentOptions {
23
23
  strict: boolean;
24
24
  }
25
25
  interface InternalMountOptions {
26
- reactDom: typeof react_dom;
27
- render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof react_dom) => void;
26
+ reactDom: typeof react_dom_client;
27
+ render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof react_dom_client) => void;
28
28
  unmount: (options: UnmountArgs) => void;
29
29
  cleanup: () => boolean;
30
30
  }
@@ -38,13 +38,6 @@ interface MountReturn {
38
38
  * or have asynchronous updates (`useEffect`, `useLayoutEffect`).
39
39
  */
40
40
  rerender: (component: React__default.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
41
- /**
42
- * Removes the mounted component.
43
- *
44
- * Removed as of Cypress 11.0.0.
45
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
46
- */
47
- unmount: (payload: UnmountArgs) => void;
48
41
  }
49
42
 
50
43
  /**
@@ -78,10 +71,10 @@ declare const getContainerEl: () => HTMLElement;
78
71
 
79
72
  /**
80
73
  * Mounts a React component into the DOM.
81
- * @param jsx {React.ReactNode} The React component to mount.
82
- * @param options {MountOptions} [options={}] options to pass to the mount function.
83
- * @param rerenderKey {string} [rerenderKey] A key to use to force a rerender.
84
- * @see {@link https://on.cypress.io/mounting-react} for more details.
74
+ * @param {import('react').JSX.Element} jsx The React component to mount.
75
+ * @param {MountOptions} options Options to pass to the mount function.
76
+ * @param {string} rerenderKey A key to use to force a rerender.
77
+ *
85
78
  * @example
86
79
  * import { mount } from '@cypress/react'
87
80
  * import { Stepper } from './Stepper'
@@ -91,21 +84,11 @@ declare const getContainerEl: () => HTMLElement;
91
84
  * cy.get('[data-cy=increment]').click()
92
85
  * cy.get('[data-cy=counter]').should('have.text', '1')
93
86
  * }
87
+ *
88
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
89
+ *
90
+ * @returns {Cypress.Chainable<MountReturn>} The mounted component.
94
91
  */
95
92
  declare function mount(jsx: React__default.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<MountReturn>;
96
- /**
97
- * Removed as of Cypress 11.0.0.
98
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
99
- */
100
- declare function unmount(options?: {
101
- log: boolean;
102
- }): void;
103
-
104
- /**
105
- * Mounts a React hook function in a test component for testing.
106
- * Removed as of Cypress 11.0.0.
107
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
108
- */
109
- declare const mountHook: <T>(hookFn: (...args: any[]) => T) => void;
110
93
 
111
- export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount, mountHook, unmount };
94
+ export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount };
@@ -17,25 +17,26 @@
17
17
  },
18
18
  "devDependencies": {
19
19
  "@cypress/mount-utils": "0.0.0-development",
20
- "@types/semver": "7.5.0",
21
- "@vitejs/plugin-react": "4.3.0",
22
- "axios": "0.21.2",
20
+ "@types/semver": "7.5.8",
21
+ "@vitejs/plugin-react": "4.3.3",
22
+ "axios": "1.7.7",
23
23
  "cypress": "0.0.0-development",
24
- "prop-types": "15.7.2",
25
- "react": "17.0.2",
26
- "react-dom": "17.0.2",
27
- "react-router": "6.10.0",
28
- "react-router-dom": "6.10.0",
24
+ "prop-types": "15.8.1",
25
+ "react": "18.3.1",
26
+ "react-dom": "18.3.1",
27
+ "react-router": "6.28.0",
28
+ "react-router-dom": "6.28.0",
29
29
  "semver": "^7.5.3",
30
30
  "typescript": "~5.4.5",
31
- "vite": "5.2.11",
31
+ "vite": "5.4.10",
32
32
  "vite-plugin-require-transform": "1.0.12"
33
33
  },
34
34
  "peerDependencies": {
35
- "@types/react": "^16.9.16 || ^17.0.0",
35
+ "@types/react": "^18 || ^19",
36
+ "@types/react-dom": "^18 || ^19",
36
37
  "cypress": "*",
37
- "react": "^=16.x || ^=17.x",
38
- "react-dom": "^=16.x || ^=17.x"
38
+ "react": "^18 || ^19",
39
+ "react-dom": "^18 || ^19"
39
40
  },
40
41
  "files": [
41
42
  "dist"
@@ -90,9 +91,6 @@
90
91
  "nx": {
91
92
  "targets": {
92
93
  "build": {
93
- "dependsOn": [
94
- "!@cypress/react18:build"
95
- ],
96
94
  "outputs": [
97
95
  "{workspaceRoot}/cli/react",
98
96
  "{projectRoot}/dist"
package/svelte/README.md CHANGED
@@ -1,8 +1,12 @@
1
1
  # @cypress/svelte
2
2
 
3
- Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
3
+ Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
4
4
 
5
- > **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/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
5
+ > **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/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases or in the case you may require an older or non supported version of svelte.
6
+
7
+ ## Requirements
8
+
9
+ - Svelte 5+ (Cypress 13 and under supports Svelte 4 and under)
6
10
 
7
11
  ## Development
8
12
 
@@ -1,12 +1,14 @@
1
1
 
2
2
  /**
3
3
  * @cypress/svelte v0.0.0-development
4
- * (c) 2024 Cypress.io
4
+ * (c) 2025 Cypress.io
5
5
  * Released under the MIT License
6
6
  */
7
7
 
8
8
  'use strict';
9
9
 
10
+ var svelte = require('svelte');
11
+
10
12
  const ROOT_SELECTOR = '[data-cy-root]';
11
13
  /**
12
14
  * Gets the root element used to mount the component.
@@ -20,13 +22,6 @@ const getContainerEl = () => {
20
22
  }
21
23
  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.`);
22
24
  };
23
- function checkForRemovedStyleOptions(mountingOptions) {
24
- for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
25
- if (mountingOptions[key]) {
26
- Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
27
- }
28
- }
29
- }
30
25
  /**
31
26
  * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
32
27
  * @param optionalCallback Callback to be called before the next test runs
@@ -59,7 +54,9 @@ function setupHooks(optionalCallback) {
59
54
  const DEFAULT_COMP_NAME = 'unknown';
60
55
  let componentInstance;
61
56
  const cleanup = () => {
62
- componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
57
+ if (componentInstance) {
58
+ svelte.unmount(componentInstance);
59
+ }
63
60
  };
64
61
  // Extract the component name from the object passed to mount
65
62
  const getComponentDisplayName = (Component) => {
@@ -72,7 +69,7 @@ const getComponentDisplayName = (Component) => {
72
69
  /**
73
70
  * Mounts a Svelte component inside the Cypress browser
74
71
  *
75
- * @param {SvelteConstructor<T>} Component Svelte component being mounted
72
+ * @param {Record<string, any>} Component Svelte component being mounted
76
73
  * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
77
74
  * @returns Cypress.Chainable<MountReturn>
78
75
  *
@@ -88,13 +85,16 @@ const getComponentDisplayName = (Component) => {
88
85
  * @see {@link https://on.cypress.io/mounting-svelte} for more details.
89
86
  */
90
87
  function mount(Component, options = {}) {
91
- checkForRemovedStyleOptions(options);
88
+ // In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
89
+ // so we default the logging of it to false as it doesn't provide a lot of value
90
+ options.log = options.log || false;
92
91
  return cy.then(() => {
93
92
  // Remove last mounted component if cy.mount is called more than once in a test
94
93
  cleanup();
95
94
  const target = getContainerEl();
96
95
  const ComponentConstructor = (Component.default || Component);
97
- componentInstance = new ComponentConstructor(Object.assign({ target }, options));
96
+ // @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
97
+ componentInstance = svelte.mount(ComponentConstructor, Object.assign({ target }, options));
98
98
  // by waiting, we are delaying test execution for the next tick of event loop
99
99
  // and letting hooks and component lifecycle methods to execute mount
100
100
  return cy.wait(0, { log: false }).then(() => {
@@ -1,10 +1,12 @@
1
1
 
2
2
  /**
3
3
  * @cypress/svelte v0.0.0-development
4
- * (c) 2024 Cypress.io
4
+ * (c) 2025 Cypress.io
5
5
  * Released under the MIT License
6
6
  */
7
7
 
8
+ import { mount as mount$1, unmount } from 'svelte';
9
+
8
10
  const ROOT_SELECTOR = '[data-cy-root]';
9
11
  /**
10
12
  * Gets the root element used to mount the component.
@@ -18,13 +20,6 @@ const getContainerEl = () => {
18
20
  }
19
21
  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.`);
20
22
  };
21
- function checkForRemovedStyleOptions(mountingOptions) {
22
- for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
23
- if (mountingOptions[key]) {
24
- Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
25
- }
26
- }
27
- }
28
23
  /**
29
24
  * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
30
25
  * @param optionalCallback Callback to be called before the next test runs
@@ -57,7 +52,9 @@ function setupHooks(optionalCallback) {
57
52
  const DEFAULT_COMP_NAME = 'unknown';
58
53
  let componentInstance;
59
54
  const cleanup = () => {
60
- componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
55
+ if (componentInstance) {
56
+ unmount(componentInstance);
57
+ }
61
58
  };
62
59
  // Extract the component name from the object passed to mount
63
60
  const getComponentDisplayName = (Component) => {
@@ -70,7 +67,7 @@ const getComponentDisplayName = (Component) => {
70
67
  /**
71
68
  * Mounts a Svelte component inside the Cypress browser
72
69
  *
73
- * @param {SvelteConstructor<T>} Component Svelte component being mounted
70
+ * @param {Record<string, any>} Component Svelte component being mounted
74
71
  * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
75
72
  * @returns Cypress.Chainable<MountReturn>
76
73
  *
@@ -86,13 +83,16 @@ const getComponentDisplayName = (Component) => {
86
83
  * @see {@link https://on.cypress.io/mounting-svelte} for more details.
87
84
  */
88
85
  function mount(Component, options = {}) {
89
- checkForRemovedStyleOptions(options);
86
+ // In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
87
+ // so we default the logging of it to false as it doesn't provide a lot of value
88
+ options.log = options.log || false;
90
89
  return cy.then(() => {
91
90
  // Remove last mounted component if cy.mount is called more than once in a test
92
91
  cleanup();
93
92
  const target = getContainerEl();
94
93
  const ComponentConstructor = (Component.default || Component);
95
- componentInstance = new ComponentConstructor(Object.assign({ target }, options));
94
+ // @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
95
+ componentInstance = mount$1(ComponentConstructor, Object.assign({ target }, options));
96
96
  // by waiting, we are delaying test execution for the next tick of event loop
97
97
  // and letting hooks and component lifecycle methods to execute mount
98
98
  return cy.wait(0, { log: false }).then(() => {
@@ -1,187 +1,14 @@
1
1
  /// <reference types="cypress" />
2
2
 
3
- declare module '*.svelte' {
4
- export { SvelteComponentDev as default } from 'svelte/internal';
5
- }
6
-
7
- /**
8
- * INTERNAL, DO NOT USE. Code may change at any time.
9
- */
10
- interface Fragment {
11
- key: string | null;
12
- first: null;
13
- c: () => void;
14
- l: (nodes: any) => void;
15
- h: () => void;
16
- m: (target: HTMLElement, anchor: any) => void;
17
- p: (ctx: any, dirty: any) => void;
18
- r: () => void;
19
- f: () => void;
20
- a: () => void;
21
- i: (local: any) => void;
22
- o: (local: any) => void;
23
- d: (detaching: 0 | 1) => void;
24
- }
25
- interface T$$ {
26
- dirty: number[];
27
- ctx: null | any;
28
- bound: any;
29
- update: () => void;
30
- callbacks: any;
31
- after_update: any[];
32
- props: Record<string, 0 | string>;
33
- fragment: null | false | Fragment;
34
- not_equal: any;
35
- before_update: any[];
36
- context: Map<any, any>;
37
- on_mount: any[];
38
- on_destroy: any[];
39
- skip_bound: boolean;
40
- on_disconnect: any[];
41
- root: Element | ShadowRoot;
42
- }
43
- /**
44
- * Base class for Svelte components. Used when dev=false.
45
- */
46
- declare class SvelteComponent {
47
- $$: T$$;
48
- $$set?: ($$props: any) => void;
49
- $destroy(): void;
50
- $on(type: any, callback: any): () => void;
51
- $set($$props: any): void;
52
- }
53
-
54
- declare type Props = Record<string, any>;
55
- interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
56
- target: Element | ShadowRoot;
57
- anchor?: Element;
58
- props?: Props;
59
- context?: Map<any, any>;
60
- hydrate?: boolean;
61
- intro?: boolean;
62
- $$inline?: boolean;
63
- }
64
- interface SvelteComponentDev$1 {
65
- $set(props?: Props): void;
66
- $on(event: string, callback: (event: any) => void): () => void;
67
- $destroy(): void;
68
- [accessor: string]: any;
69
- }
70
- /**
71
- * Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
72
- */
73
- declare class SvelteComponentDev$1 extends SvelteComponent {
74
- /**
75
- * @private
76
- * For type checking capabilities only.
77
- * Does not exist at runtime.
78
- * ### DO NOT USE!
79
- */
80
- $$prop_def: Props;
81
- /**
82
- * @private
83
- * For type checking capabilities only.
84
- * Does not exist at runtime.
85
- * ### DO NOT USE!
86
- */
87
- $$events_def: any;
88
- /**
89
- * @private
90
- * For type checking capabilities only.
91
- * Does not exist at runtime.
92
- * ### DO NOT USE!
93
- */
94
- $$slot_def: any;
95
- constructor(options: ComponentConstructorOptions);
96
- $capture_state(): void;
97
- $inject_state(): void;
98
- }
99
- interface SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> {
100
- $set(props?: Partial<Props>): void;
101
- $on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
102
- $destroy(): void;
103
- [accessor: string]: any;
104
- }
105
- /**
106
- * Base class to create strongly typed Svelte components.
107
- * This only exists for typing purposes and should be used in `.d.ts` files.
108
- *
109
- * ### Example:
110
- *
111
- * You have component library on npm called `component-library`, from which
112
- * you export a component called `MyComponent`. For Svelte+TypeScript users,
113
- * you want to provide typings. Therefore you create a `index.d.ts`:
114
- * ```ts
115
- * import { SvelteComponentTyped } from "svelte";
116
- * export class MyComponent extends SvelteComponentTyped<{foo: string}> {}
117
- * ```
118
- * Typing this makes it possible for IDEs like VS Code with the Svelte extension
119
- * to provide intellisense and to use the component like this in a Svelte file
120
- * with TypeScript:
121
- * ```svelte
122
- * <script lang="ts">
123
- * import { MyComponent } from "component-library";
124
- * </script>
125
- * <MyComponent foo={'bar'} />
126
- * ```
127
- *
128
- * #### Why not make this part of `SvelteComponent(Dev)`?
129
- * Because
130
- * ```ts
131
- * class ASubclassOfSvelteComponent extends SvelteComponent<{foo: string}> {}
132
- * const component: typeof SvelteComponent = ASubclassOfSvelteComponent;
133
- * ```
134
- * will throw a type error, so we need to separate the more strictly typed class.
135
- */
136
- declare class SvelteComponentTyped<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> extends SvelteComponentDev$1 {
137
- /**
138
- * @private
139
- * For type checking capabilities only.
140
- * Does not exist at runtime.
141
- * ### DO NOT USE!
142
- */
143
- $$prop_def: Props;
144
- /**
145
- * @private
146
- * For type checking capabilities only.
147
- * Does not exist at runtime.
148
- * ### DO NOT USE!
149
- */
150
- $$events_def: Events;
151
- /**
152
- * @private
153
- * For type checking capabilities only.
154
- * Does not exist at runtime.
155
- * ### DO NOT USE!
156
- */
157
- $$slot_def: Slots;
158
- constructor(options: ComponentConstructorOptions<Props>);
159
- }
160
- /**
161
- * Convenience type to get the props the given component expects. Example:
162
- * ```html
163
- * <script lang="ts">
164
- * import type { ComponentProps } from 'svelte';
165
- * import Component from './Component.svelte';
166
- *
167
- * const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
168
- * </script>
169
- * ```
170
- */
171
- declare type ComponentProps<Component extends SvelteComponent> = Component extends SvelteComponentTyped<infer Props> ? Props : never;
3
+ import { Component, MountOptions } from 'svelte';
172
4
 
173
- type SvelteConstructor<T> = new (...args: any[]) => T;
174
- type SvelteComponentOptions<T extends SvelteComponentDev$1> = Omit<ComponentConstructorOptions<ComponentProps<T>>, 'hydrate' | 'target' | '$$inline'>;
175
- interface MountOptions<T extends SvelteComponentDev$1> extends SvelteComponentOptions<T> {
176
- log?: boolean;
177
- }
178
- interface MountReturn<T extends SvelteComponentDev$1> {
179
- component: T;
5
+ interface MountReturn {
6
+ component: Record<string, any>;
180
7
  }
181
8
  /**
182
9
  * Mounts a Svelte component inside the Cypress browser
183
10
  *
184
- * @param {SvelteConstructor<T>} Component Svelte component being mounted
11
+ * @param {Record<string, any>} Component Svelte component being mounted
185
12
  * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
186
13
  * @returns Cypress.Chainable<MountReturn>
187
14
  *
@@ -196,6 +23,8 @@ interface MountReturn<T extends SvelteComponentDev$1> {
196
23
  *
197
24
  * @see {@link https://on.cypress.io/mounting-svelte} for more details.
198
25
  */
199
- declare function mount<T extends SvelteComponentDev$1>(Component: SvelteConstructor<T>, options?: MountOptions<T>): Cypress.Chainable<MountReturn<T>>;
26
+ declare function mount(Component: Component<Record<string, any>, Record<string, any>, any>, options?: Omit<MountOptions, 'target'> & {
27
+ log?: boolean;
28
+ }): Cypress.Chainable<MountReturn>;
200
29
 
201
- export { MountOptions, MountReturn, mount };
30
+ export { MountReturn, mount };
@@ -12,12 +12,12 @@
12
12
  },
13
13
  "devDependencies": {
14
14
  "@cypress/mount-utils": "0.0.0-development",
15
- "svelte": "^3.49.0",
15
+ "svelte": "^5.4.0",
16
16
  "typescript": "~5.4.5"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "cypress": ">=10.6.0",
20
- "svelte": ">=3.0.0"
20
+ "svelte": ">=5.0.0"
21
21
  },
22
22
  "files": [
23
23
  "dist/**/*"
@@ -1,8 +1,12 @@
1
1
  # @cypress/svelte
2
2
 
3
- Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
3
+ Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner
4
4
 
5
- > **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/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
5
+ > **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/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases or in the case you may require an older or non supported version of svelte.
6
+
7
+ ## Requirements
8
+
9
+ - Svelte 5+ (Cypress 13 and under supports Svelte 4 and under)
6
10
 
7
11
  ## Development
8
12
 
@@ -1,12 +1,14 @@
1
1
 
2
2
  /**
3
3
  * @cypress/svelte v0.0.0-development
4
- * (c) 2024 Cypress.io
4
+ * (c) 2025 Cypress.io
5
5
  * Released under the MIT License
6
6
  */
7
7
 
8
8
  'use strict';
9
9
 
10
+ var svelte = require('svelte');
11
+
10
12
  const ROOT_SELECTOR = '[data-cy-root]';
11
13
  /**
12
14
  * Gets the root element used to mount the component.
@@ -20,13 +22,6 @@ const getContainerEl = () => {
20
22
  }
21
23
  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.`);
22
24
  };
23
- function checkForRemovedStyleOptions(mountingOptions) {
24
- for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
25
- if (mountingOptions[key]) {
26
- Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
27
- }
28
- }
29
- }
30
25
  /**
31
26
  * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
32
27
  * @param optionalCallback Callback to be called before the next test runs
@@ -59,7 +54,9 @@ function setupHooks(optionalCallback) {
59
54
  const DEFAULT_COMP_NAME = 'unknown';
60
55
  let componentInstance;
61
56
  const cleanup = () => {
62
- componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
57
+ if (componentInstance) {
58
+ svelte.unmount(componentInstance);
59
+ }
63
60
  };
64
61
  // Extract the component name from the object passed to mount
65
62
  const getComponentDisplayName = (Component) => {
@@ -72,7 +69,7 @@ const getComponentDisplayName = (Component) => {
72
69
  /**
73
70
  * Mounts a Svelte component inside the Cypress browser
74
71
  *
75
- * @param {SvelteConstructor<T>} Component Svelte component being mounted
72
+ * @param {Record<string, any>} Component Svelte component being mounted
76
73
  * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
77
74
  * @returns Cypress.Chainable<MountReturn>
78
75
  *
@@ -88,13 +85,16 @@ const getComponentDisplayName = (Component) => {
88
85
  * @see {@link https://on.cypress.io/mounting-svelte} for more details.
89
86
  */
90
87
  function mount(Component, options = {}) {
91
- checkForRemovedStyleOptions(options);
88
+ // In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
89
+ // so we default the logging of it to false as it doesn't provide a lot of value
90
+ options.log = options.log || false;
92
91
  return cy.then(() => {
93
92
  // Remove last mounted component if cy.mount is called more than once in a test
94
93
  cleanup();
95
94
  const target = getContainerEl();
96
95
  const ComponentConstructor = (Component.default || Component);
97
- componentInstance = new ComponentConstructor(Object.assign({ target }, options));
96
+ // @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
97
+ componentInstance = svelte.mount(ComponentConstructor, Object.assign({ target }, options));
98
98
  // by waiting, we are delaying test execution for the next tick of event loop
99
99
  // and letting hooks and component lifecycle methods to execute mount
100
100
  return cy.wait(0, { log: false }).then(() => {
@@ -1,10 +1,12 @@
1
1
 
2
2
  /**
3
3
  * @cypress/svelte v0.0.0-development
4
- * (c) 2024 Cypress.io
4
+ * (c) 2025 Cypress.io
5
5
  * Released under the MIT License
6
6
  */
7
7
 
8
+ import { mount as mount$1, unmount } from 'svelte';
9
+
8
10
  const ROOT_SELECTOR = '[data-cy-root]';
9
11
  /**
10
12
  * Gets the root element used to mount the component.
@@ -18,13 +20,6 @@ const getContainerEl = () => {
18
20
  }
19
21
  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.`);
20
22
  };
21
- function checkForRemovedStyleOptions(mountingOptions) {
22
- for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
23
- if (mountingOptions[key]) {
24
- Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
25
- }
26
- }
27
- }
28
23
  /**
29
24
  * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
30
25
  * @param optionalCallback Callback to be called before the next test runs
@@ -57,7 +52,9 @@ function setupHooks(optionalCallback) {
57
52
  const DEFAULT_COMP_NAME = 'unknown';
58
53
  let componentInstance;
59
54
  const cleanup = () => {
60
- componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.$destroy();
55
+ if (componentInstance) {
56
+ unmount(componentInstance);
57
+ }
61
58
  };
62
59
  // Extract the component name from the object passed to mount
63
60
  const getComponentDisplayName = (Component) => {
@@ -70,7 +67,7 @@ const getComponentDisplayName = (Component) => {
70
67
  /**
71
68
  * Mounts a Svelte component inside the Cypress browser
72
69
  *
73
- * @param {SvelteConstructor<T>} Component Svelte component being mounted
70
+ * @param {Record<string, any>} Component Svelte component being mounted
74
71
  * @param {MountReturn<T extends SvelteComponent>} options options to customize the component being mounted
75
72
  * @returns Cypress.Chainable<MountReturn>
76
73
  *
@@ -86,13 +83,16 @@ const getComponentDisplayName = (Component) => {
86
83
  * @see {@link https://on.cypress.io/mounting-svelte} for more details.
87
84
  */
88
85
  function mount(Component, options = {}) {
89
- checkForRemovedStyleOptions(options);
86
+ // In Svelte 5, the component name is no longer easily discoverable and logs as "wrapper"
87
+ // so we default the logging of it to false as it doesn't provide a lot of value
88
+ options.log = options.log || false;
90
89
  return cy.then(() => {
91
90
  // Remove last mounted component if cy.mount is called more than once in a test
92
91
  cleanup();
93
92
  const target = getContainerEl();
94
93
  const ComponentConstructor = (Component.default || Component);
95
- componentInstance = new ComponentConstructor(Object.assign({ target }, options));
94
+ // @see https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
95
+ componentInstance = mount$1(ComponentConstructor, Object.assign({ target }, options));
96
96
  // by waiting, we are delaying test execution for the next tick of event loop
97
97
  // and letting hooks and component lifecycle methods to execute mount
98
98
  return cy.wait(0, { log: false }).then(() => {