cypress 13.16.1 → 14.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/angular/README.md +5 -0
- package/angular/angular/README.md +5 -0
- package/angular/angular/dist/index.d.ts +11 -2
- package/angular/angular/dist/index.js +944 -4
- package/angular/angular/package.json +16 -9
- package/angular/dist/index.d.ts +11 -2
- package/angular/dist/index.js +944 -4
- package/angular/package.json +16 -9
- package/lib/cli.js +1 -30
- package/lib/exec/spawn.js +17 -7
- package/mount-utils/dist/index.d.ts +0 -28
- package/mount-utils/dist/index.js +0 -27
- package/mount-utils/mount-utils/dist/index.d.ts +0 -28
- package/mount-utils/mount-utils/dist/index.js +0 -27
- package/package.json +5 -23
- package/react/README.md +5 -0
- package/react/dist/cypress-react.cjs.js +21 -676
- package/react/dist/cypress-react.esm-bundler.js +22 -676
- package/react/dist/index.d.ts +13 -30
- package/react/package.json +13 -15
- package/react/react/README.md +5 -0
- package/react/react/dist/cypress-react.cjs.js +21 -676
- package/react/react/dist/cypress-react.esm-bundler.js +22 -676
- package/react/react/dist/index.d.ts +13 -30
- package/react/react/package.json +13 -15
- package/svelte/README.md +6 -2
- package/svelte/dist/cypress-svelte.cjs.js +12 -12
- package/svelte/dist/cypress-svelte.esm-bundler.js +12 -12
- package/svelte/dist/index.d.ts +8 -179
- package/svelte/package.json +2 -2
- package/svelte/svelte/README.md +6 -2
- package/svelte/svelte/dist/cypress-svelte.cjs.js +12 -12
- package/svelte/svelte/dist/cypress-svelte.esm-bundler.js +12 -12
- package/svelte/svelte/dist/index.d.ts +8 -179
- package/svelte/svelte/package.json +2 -2
- package/types/cypress.d.ts +32 -49
- package/types/net-stubbing.d.ts +2 -7
- package/vue/dist/cypress-vue.cjs.js +380 -275
- package/vue/dist/cypress-vue.esm-bundler.js +382 -276
- package/vue/dist/index.d.ts +61 -78
- package/vue/package.json +2 -5
- package/vue/vue/dist/cypress-vue.cjs.js +380 -275
- package/vue/vue/dist/cypress-vue.esm-bundler.js +382 -276
- package/vue/vue/dist/index.d.ts +61 -78
- package/vue/vue/package.json +2 -5
- package/angular-signals/README.md +0 -11
- package/angular-signals/angular-signals/README.md +0 -11
- package/angular-signals/angular-signals/dist/index.d.ts +0 -136
- package/angular-signals/angular-signals/dist/index.js +0 -1861
- package/angular-signals/angular-signals/package.json +0 -74
- package/angular-signals/dist/index.d.ts +0 -136
- package/angular-signals/dist/index.js +0 -1861
- package/angular-signals/package.json +0 -74
- package/react18/README.md +0 -7
- package/react18/dist/cypress-react.cjs.js +0 -597
- package/react18/dist/cypress-react.esm-bundler.js +0 -574
- package/react18/dist/index.d.ts +0 -78
- package/react18/package.json +0 -71
- package/react18/react18/README.md +0 -7
- package/react18/react18/dist/cypress-react.cjs.js +0 -597
- package/react18/react18/dist/cypress-react.esm-bundler.js +0 -574
- package/react18/react18/dist/index.d.ts +0 -78
- package/react18/react18/package.json +0 -71
- package/vue2/README.md +0 -7
- package/vue2/dist/cypress-vue2.cjs.js +0 -20045
- package/vue2/dist/cypress-vue2.esm-bundler.js +0 -20042
- package/vue2/dist/index.d.ts +0 -207
- package/vue2/package.json +0 -65
- package/vue2/vue2/README.md +0 -7
- package/vue2/vue2/dist/cypress-vue2.cjs.js +0 -20045
- package/vue2/vue2/dist/cypress-vue2.esm-bundler.js +0 -20042
- package/vue2/vue2/dist/index.d.ts +0 -207
- 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
|
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
|
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
|
27
|
-
render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof
|
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
|
82
|
-
* @param
|
83
|
-
* @param
|
84
|
-
*
|
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
|
94
|
+
export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount };
|
package/react/react/package.json
CHANGED
@@ -17,25 +17,26 @@
|
|
17
17
|
},
|
18
18
|
"devDependencies": {
|
19
19
|
"@cypress/mount-utils": "0.0.0-development",
|
20
|
-
"@types/semver": "7.5.
|
21
|
-
"@vitejs/plugin-react": "4.3.
|
22
|
-
"axios": "
|
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.
|
25
|
-
"react": "
|
26
|
-
"react-dom": "
|
27
|
-
"react-router": "6.
|
28
|
-
"react-router-dom": "6.
|
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.
|
31
|
+
"vite": "5.4.10",
|
32
32
|
"vite-plugin-require-transform": "1.0.12"
|
33
33
|
},
|
34
34
|
"peerDependencies": {
|
35
|
-
"@types/react": "^
|
35
|
+
"@types/react": "^18 || ^19",
|
36
|
+
"@types/react-dom": "^18 || ^19",
|
36
37
|
"cypress": "*",
|
37
|
-
"react": "
|
38
|
-
"react-dom": "
|
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
|
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)
|
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
|
-
|
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 {
|
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
|
-
|
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
|
-
|
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)
|
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
|
-
|
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 {
|
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
|
-
|
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
|
-
|
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(() => {
|
package/svelte/dist/index.d.ts
CHANGED
@@ -1,187 +1,14 @@
|
|
1
1
|
/// <reference types="cypress" />
|
2
2
|
|
3
|
-
|
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
|
-
|
174
|
-
|
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 {
|
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
|
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 {
|
30
|
+
export { MountReturn, mount };
|
package/svelte/package.json
CHANGED
@@ -12,12 +12,12 @@
|
|
12
12
|
},
|
13
13
|
"devDependencies": {
|
14
14
|
"@cypress/mount-utils": "0.0.0-development",
|
15
|
-
"svelte": "^
|
15
|
+
"svelte": "^5.4.0",
|
16
16
|
"typescript": "~5.4.5"
|
17
17
|
},
|
18
18
|
"peerDependencies": {
|
19
19
|
"cypress": ">=10.6.0",
|
20
|
-
"svelte": ">=
|
20
|
+
"svelte": ">=5.0.0"
|
21
21
|
},
|
22
22
|
"files": [
|
23
23
|
"dist/**/*"
|
package/svelte/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
|
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)
|
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
|
-
|
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 {
|
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
|
-
|
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
|
-
|
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)
|
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
|
-
|
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 {
|
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
|
-
|
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
|
-
|
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(() => {
|