cypress 10.11.0 → 11.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/CHANGELOG.md +20 -0
- package/angular/dist/index.d.ts +124 -1
- package/angular/dist/index.js +59 -59
- package/lib/cli.js +15 -1
- package/lib/tasks/download.js +3 -7
- package/lib/util.js +2 -2
- package/mount-utils/CHANGELOG.md +14 -0
- package/mount-utils/README.md +5 -23
- package/mount-utils/dist/index.d.ts +25 -39
- package/mount-utils/dist/index.js +33 -112
- package/mount-utils/package.json +1 -0
- package/package.json +3 -3
- package/react/CHANGELOG.md +27 -0
- package/react/README.md +2 -22
- package/react/dist/cypress-react.cjs.js +92 -219
- package/react/dist/cypress-react.esm-bundler.js +92 -220
- package/react/dist/index.d.ts +111 -4
- package/react18/CHANGELOG.md +13 -0
- package/react18/dist/cypress-react.cjs.js +117 -180
- package/react18/dist/cypress-react.esm-bundler.js +103 -167
- package/react18/dist/index.d.ts +78 -6
- package/react18/package.json +1 -0
- package/svelte/CHANGELOG.md +20 -0
- package/svelte/dist/cypress-svelte.cjs.js +19 -114
- package/svelte/dist/cypress-svelte.esm-bundler.js +19 -114
- package/svelte/dist/index.d.ts +201 -1
- package/types/cypress.d.ts +18 -10
- package/vue/CHANGELOG.md +34 -0
- package/vue/README.md +4 -8
- package/vue/dist/cypress-vue.cjs.js +68 -151
- package/vue/dist/cypress-vue.esm-bundler.js +68 -151
- package/vue/dist/index.d.ts +1352 -104
- package/vue/package.json +1 -1
- package/vue2/CHANGELOG.md +27 -0
- package/vue2/README.md +3 -7
- package/vue2/dist/cypress-vue2.cjs.js +87 -211
- package/vue2/dist/cypress-vue2.esm-bundler.js +86 -210
- package/vue2/dist/index.d.ts +341 -172
- package/vue2/package.json +1 -3
- package/angular/dist/mount.d.ts +0 -112
- package/react/dist/createMount.d.ts +0 -31
- package/react/dist/getDisplayName.d.ts +0 -8
- package/react/dist/mount.d.ts +0 -8
- package/react/dist/mountHook.d.ts +0 -12
- package/react/dist/types.d.ts +0 -45
- package/svelte/dist/mount.d.ts +0 -30
- package/vue/dist/@vue/test-utils/baseWrapper.d.ts +0 -63
- package/vue/dist/@vue/test-utils/components/RouterLinkStub.d.ts +0 -21
- package/vue/dist/@vue/test-utils/config.d.ts +0 -30
- package/vue/dist/@vue/test-utils/constants/dom-events.d.ts +0 -900
- package/vue/dist/@vue/test-utils/createDomEvent.d.ts +0 -9
- package/vue/dist/@vue/test-utils/domWrapper.d.ts +0 -18
- package/vue/dist/@vue/test-utils/emit.d.ts +0 -5
- package/vue/dist/@vue/test-utils/errorWrapper.d.ts +0 -1
- package/vue/dist/@vue/test-utils/index.d.ts +0 -11
- package/vue/dist/@vue/test-utils/interfaces/wrapperLike.d.ts +0 -56
- package/vue/dist/@vue/test-utils/mount.d.ts +0 -35
- package/vue/dist/@vue/test-utils/stubs.d.ts +0 -22
- package/vue/dist/@vue/test-utils/types.d.ts +0 -125
- package/vue/dist/@vue/test-utils/utils/autoUnmount.d.ts +0 -5
- package/vue/dist/@vue/test-utils/utils/compileSlots.d.ts +0 -2
- package/vue/dist/@vue/test-utils/utils/componentName.d.ts +0 -4
- package/vue/dist/@vue/test-utils/utils/find.d.ts +0 -10
- package/vue/dist/@vue/test-utils/utils/flushPromises.d.ts +0 -1
- package/vue/dist/@vue/test-utils/utils/getRootNodes.d.ts +0 -2
- package/vue/dist/@vue/test-utils/utils/isElement.d.ts +0 -1
- package/vue/dist/@vue/test-utils/utils/isElementVisible.d.ts +0 -6
- package/vue/dist/@vue/test-utils/utils/matchName.d.ts +0 -1
- package/vue/dist/@vue/test-utils/utils/stringifyNode.d.ts +0 -1
- package/vue/dist/@vue/test-utils/utils/vueCompatSupport.d.ts +0 -8
- package/vue/dist/@vue/test-utils/utils/vueShared.d.ts +0 -3
- package/vue/dist/@vue/test-utils/utils.d.ts +0 -13
- package/vue/dist/@vue/test-utils/vueWrapper.d.ts +0 -35
- package/vue/dist/@vue/test-utils/wrapperFactory.d.ts +0 -14
@@ -9,17 +9,16 @@ import * as React from 'react';
|
|
9
9
|
import React__default from 'react';
|
10
10
|
import ReactDOM from 'react-dom';
|
11
11
|
|
12
|
-
const cachedDisplayNames = new WeakMap();
|
13
12
|
/**
|
14
13
|
* Gets the display name of the component when possible.
|
15
14
|
* @param type {JSX} The type object returned from creating the react element.
|
16
15
|
* @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
|
17
16
|
* @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
|
18
17
|
*/
|
19
|
-
function getDisplayName(
|
20
|
-
const
|
21
|
-
if (
|
22
|
-
return
|
18
|
+
function getDisplayName(node, fallbackName = 'Unknown') {
|
19
|
+
const type = node === null || node === void 0 ? void 0 : node.type;
|
20
|
+
if (!type) {
|
21
|
+
return fallbackName;
|
23
22
|
}
|
24
23
|
let displayName = null;
|
25
24
|
// The displayName property is not guaranteed to be a string.
|
@@ -44,16 +43,15 @@ function getDisplayName(type, fallbackName = 'Unknown') {
|
|
44
43
|
}
|
45
44
|
}
|
46
45
|
}
|
47
|
-
try {
|
48
|
-
cachedDisplayNames.set(type, displayName);
|
49
|
-
}
|
50
|
-
catch (e) {
|
51
|
-
// do nothing
|
52
|
-
}
|
53
46
|
return displayName;
|
54
47
|
}
|
55
48
|
|
56
49
|
const ROOT_SELECTOR = '[data-cy-root]';
|
50
|
+
/**
|
51
|
+
* Gets the root element used to mount the component.
|
52
|
+
* @returns {HTMLElement} The root element
|
53
|
+
* @throws {Error} If the root element is not found
|
54
|
+
*/
|
57
55
|
const getContainerEl = () => {
|
58
56
|
const el = document.querySelector(ROOT_SELECTOR);
|
59
57
|
if (el) {
|
@@ -61,122 +59,19 @@ const getContainerEl = () => {
|
|
61
59
|
}
|
62
60
|
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.`);
|
63
61
|
};
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
*/
|
69
|
-
function cleanupStyles() {
|
70
|
-
const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
|
71
|
-
styles.forEach((styleElement) => {
|
72
|
-
if (styleElement.parentElement) {
|
73
|
-
styleElement.parentElement.removeChild(styleElement);
|
62
|
+
function checkForRemovedStyleOptions(mountingOptions) {
|
63
|
+
for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets']) {
|
64
|
+
if (mountingOptions[key]) {
|
65
|
+
Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key);
|
74
66
|
}
|
75
|
-
}
|
76
|
-
const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
|
77
|
-
links.forEach((link) => {
|
78
|
-
if (link.parentElement) {
|
79
|
-
link.parentElement.removeChild(link);
|
80
|
-
}
|
81
|
-
});
|
82
|
-
}
|
83
|
-
/**
|
84
|
-
* Insert links to external style resources.
|
85
|
-
*/
|
86
|
-
function insertStylesheets(stylesheets, document, el) {
|
87
|
-
stylesheets.forEach((href) => {
|
88
|
-
const link = document.createElement('link');
|
89
|
-
link.type = 'text/css';
|
90
|
-
link.rel = 'stylesheet';
|
91
|
-
link.href = href;
|
92
|
-
link.dataset.cy = 'injected-stylesheet';
|
93
|
-
document.body.insertBefore(link, el);
|
94
|
-
});
|
95
|
-
}
|
96
|
-
/**
|
97
|
-
* Inserts a single stylesheet element
|
98
|
-
*/
|
99
|
-
function insertStyles(styles, document, el) {
|
100
|
-
styles.forEach((style) => {
|
101
|
-
const styleElement = document.createElement('style');
|
102
|
-
styleElement.dataset.cy = 'injected-style-tag';
|
103
|
-
styleElement.appendChild(document.createTextNode(style));
|
104
|
-
document.body.insertBefore(styleElement, el);
|
105
|
-
});
|
106
|
-
}
|
107
|
-
function insertSingleCssFile(cssFilename, document, el, log) {
|
108
|
-
return cy.readFile(cssFilename, { log }).then((css) => {
|
109
|
-
const style = document.createElement('style');
|
110
|
-
style.appendChild(document.createTextNode(css));
|
111
|
-
document.body.insertBefore(style, el);
|
112
|
-
});
|
113
|
-
}
|
114
|
-
/**
|
115
|
-
* Reads the given CSS file from local file system
|
116
|
-
* and adds the loaded style text as an element.
|
117
|
-
*/
|
118
|
-
function insertLocalCssFiles(cssFilenames, document, el, log) {
|
119
|
-
return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
|
120
|
-
return insertSingleCssFile(cssFilename, document, el, log);
|
121
|
-
});
|
67
|
+
}
|
122
68
|
}
|
123
69
|
/**
|
124
|
-
*
|
125
|
-
*
|
70
|
+
* Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
|
71
|
+
* @param optionalCallback Callback to be called before the next test runs
|
126
72
|
*/
|
127
|
-
const injectStylesBeforeElement = (options, document, el) => {
|
128
|
-
if (!el)
|
129
|
-
return;
|
130
|
-
// first insert all stylesheets as Link elements
|
131
|
-
let stylesheets = [];
|
132
|
-
if (typeof options.stylesheet === 'string') {
|
133
|
-
stylesheets.push(options.stylesheet);
|
134
|
-
}
|
135
|
-
else if (Array.isArray(options.stylesheet)) {
|
136
|
-
stylesheets = stylesheets.concat(options.stylesheet);
|
137
|
-
}
|
138
|
-
if (typeof options.stylesheets === 'string') {
|
139
|
-
options.stylesheets = [options.stylesheets];
|
140
|
-
}
|
141
|
-
if (options.stylesheets) {
|
142
|
-
stylesheets = stylesheets.concat(options.stylesheets);
|
143
|
-
}
|
144
|
-
insertStylesheets(stylesheets, document, el);
|
145
|
-
// insert any styles as <style>...</style> elements
|
146
|
-
let styles = [];
|
147
|
-
if (typeof options.style === 'string') {
|
148
|
-
styles.push(options.style);
|
149
|
-
}
|
150
|
-
else if (Array.isArray(options.style)) {
|
151
|
-
styles = styles.concat(options.style);
|
152
|
-
}
|
153
|
-
if (typeof options.styles === 'string') {
|
154
|
-
styles.push(options.styles);
|
155
|
-
}
|
156
|
-
else if (Array.isArray(options.styles)) {
|
157
|
-
styles = styles.concat(options.styles);
|
158
|
-
}
|
159
|
-
insertStyles(styles, document, el);
|
160
|
-
// now load any css files by path and add their content
|
161
|
-
// as <style>...</style> elements
|
162
|
-
let cssFiles = [];
|
163
|
-
if (typeof options.cssFile === 'string') {
|
164
|
-
cssFiles.push(options.cssFile);
|
165
|
-
}
|
166
|
-
else if (Array.isArray(options.cssFile)) {
|
167
|
-
cssFiles = cssFiles.concat(options.cssFile);
|
168
|
-
}
|
169
|
-
if (typeof options.cssFiles === 'string') {
|
170
|
-
cssFiles.push(options.cssFiles);
|
171
|
-
}
|
172
|
-
else if (Array.isArray(options.cssFiles)) {
|
173
|
-
cssFiles = cssFiles.concat(options.cssFiles);
|
174
|
-
}
|
175
|
-
return insertLocalCssFiles(cssFiles, document, el, options.log);
|
176
|
-
};
|
177
73
|
function setupHooks(optionalCallback) {
|
178
|
-
//
|
179
|
-
// file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
|
74
|
+
// We don't want CT side effects to run when e2e
|
180
75
|
// testing so we early return.
|
181
76
|
// System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
|
182
77
|
if (Cypress.testingType !== 'component') {
|
@@ -191,19 +86,9 @@ function setupHooks(optionalCallback) {
|
|
191
86
|
// @ts-ignore
|
192
87
|
Cypress.on('test:before:run', () => {
|
193
88
|
optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
|
194
|
-
cleanupStyles();
|
195
89
|
});
|
196
90
|
}
|
197
91
|
|
198
|
-
/**
|
199
|
-
* Inject custom style text or CSS file or 3rd party style resources
|
200
|
-
*/
|
201
|
-
const injectStyles = (options) => {
|
202
|
-
return () => {
|
203
|
-
const el = getContainerEl();
|
204
|
-
return injectStylesBeforeElement(options, document, el);
|
205
|
-
};
|
206
|
-
};
|
207
92
|
let mountCleanup;
|
208
93
|
/**
|
209
94
|
* Create an `mount` function. Performs all the non-React-version specific
|
@@ -218,17 +103,14 @@ const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions)
|
|
218
103
|
if (!internalMountOptions) {
|
219
104
|
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
220
105
|
}
|
106
|
+
// @ts-expect-error - this is removed but we want to check if a user is passing it, and error if they are.
|
107
|
+
if (options.alias) {
|
108
|
+
// @ts-expect-error
|
109
|
+
Cypress.utils.throwErrByPath('mount.alias', options.alias);
|
110
|
+
}
|
111
|
+
checkForRemovedStyleOptions(options);
|
221
112
|
mountCleanup = internalMountOptions.cleanup;
|
222
|
-
// Get the display name property via the component constructor
|
223
|
-
// @ts-ignore FIXME
|
224
|
-
const componentName = getDisplayName(jsx.type, options.alias);
|
225
|
-
const displayName = options.alias || componentName;
|
226
|
-
const jsxComponentName = `<${componentName} ... />`;
|
227
|
-
const message = options.alias
|
228
|
-
? `${jsxComponentName} as "${options.alias}"`
|
229
|
-
: jsxComponentName;
|
230
113
|
return cy
|
231
|
-
.then(injectStyles(options))
|
232
114
|
.then(() => {
|
233
115
|
var _a, _b, _c;
|
234
116
|
const reactDomToUse = internalMountOptions.reactDom;
|
@@ -249,38 +131,44 @@ const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions)
|
|
249
131
|
// let's get back the original component
|
250
132
|
const userComponent = reactComponent.props.children;
|
251
133
|
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
252
|
-
|
253
|
-
Cypress.log({
|
254
|
-
name: type,
|
255
|
-
type: 'parent',
|
256
|
-
message: [message],
|
257
|
-
// @ts-ignore
|
258
|
-
$el: el.children.item(0),
|
259
|
-
consoleProps: () => {
|
260
|
-
return {
|
261
|
-
// @ts-ignore protect the use of jsx functional components use ReactNode
|
262
|
-
props: jsx.props,
|
263
|
-
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
|
264
|
-
home: 'https://github.com/cypress-io/cypress',
|
265
|
-
};
|
266
|
-
},
|
267
|
-
}).snapshot('mounted').end();
|
268
|
-
}
|
269
|
-
return (
|
270
|
-
// Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
|
271
|
-
cy.wrap(userComponent, { log: false })
|
272
|
-
.as(displayName)
|
134
|
+
return (cy.wrap(userComponent, { log: false })
|
273
135
|
.then(() => {
|
274
136
|
return cy.wrap({
|
275
137
|
component: userComponent,
|
276
138
|
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
|
277
|
-
unmount:
|
139
|
+
unmount: () => {
|
140
|
+
// @ts-expect-error - undocumented API
|
141
|
+
Cypress.utils.throwErrByPath('mount.unmount');
|
142
|
+
},
|
278
143
|
}, { log: false });
|
279
144
|
})
|
280
145
|
// by waiting, we delaying test execution for the next tick of event loop
|
281
146
|
// and letting hooks and component lifecycle methods to execute mount
|
282
147
|
// https://github.com/bahmutov/cypress-react-unit-test/issues/200
|
283
|
-
.wait(0, { log: false })
|
148
|
+
.wait(0, { log: false })
|
149
|
+
.then(() => {
|
150
|
+
if (options.log !== false) {
|
151
|
+
// Get the display name property via the component constructor
|
152
|
+
// @ts-ignore FIXME
|
153
|
+
const componentName = getDisplayName(jsx);
|
154
|
+
const jsxComponentName = `<${componentName} ... />`;
|
155
|
+
Cypress.log({
|
156
|
+
name: type,
|
157
|
+
type: 'parent',
|
158
|
+
message: [jsxComponentName],
|
159
|
+
// @ts-ignore
|
160
|
+
$el: el.children.item(0),
|
161
|
+
consoleProps: () => {
|
162
|
+
return {
|
163
|
+
// @ts-ignore protect the use of jsx functional components use ReactNode
|
164
|
+
props: jsx === null || jsx === void 0 ? void 0 : jsx.props,
|
165
|
+
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
|
166
|
+
home: 'https://github.com/cypress-io/cypress',
|
167
|
+
};
|
168
|
+
},
|
169
|
+
});
|
170
|
+
}
|
171
|
+
}));
|
284
172
|
// Bluebird types are terrible. I don't think the return type can be carried without this cast
|
285
173
|
});
|
286
174
|
};
|
@@ -290,6 +178,8 @@ const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions)
|
|
290
178
|
*
|
291
179
|
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
292
180
|
* or people writing adapters for third-party, custom adapters.
|
181
|
+
*
|
182
|
+
* @param {UnmountArgs} options used during unmounting
|
293
183
|
*/
|
294
184
|
const makeUnmountFn = (options) => {
|
295
185
|
return cy.then(() => {
|
@@ -889,84 +779,66 @@ const cleanup = () => {
|
|
889
779
|
}
|
890
780
|
return false;
|
891
781
|
};
|
782
|
+
/**
|
783
|
+
* Mounts a React component into the DOM.
|
784
|
+
* @param jsx {React.ReactNode} The React component to mount.
|
785
|
+
* @param options {MountOptions} [options={}] options to pass to the mount function.
|
786
|
+
* @param rerenderKey {string} [rerenderKey] A key to use to force a rerender.
|
787
|
+
* @see {@link https://on.cypress.io/mounting-react} for more details.
|
788
|
+
* @example
|
789
|
+
* import { mount } from '@cypress/react'
|
790
|
+
* import { Stepper } from './Stepper'
|
791
|
+
*
|
792
|
+
* it('mounts', () => {
|
793
|
+
* mount(<StepperComponent />)
|
794
|
+
* cy.get('[data-cy=increment]').click()
|
795
|
+
* cy.get('[data-cy=counter]').should('have.text', '1')
|
796
|
+
* }
|
797
|
+
*/
|
892
798
|
function mount(jsx, options = {}, rerenderKey) {
|
893
799
|
if (major_1(React__default.version) === 18) {
|
894
800
|
const message = '[cypress/react]: You are using `cypress/react`, which is designed for React <= 17. Consider changing to `cypress/react18`, which is designed for React 18.';
|
895
801
|
console.error(message);
|
896
802
|
Cypress.log({ name: 'warning', message });
|
897
803
|
}
|
804
|
+
// Remove last mounted component if cy.mount is called more than once in a test
|
805
|
+
cleanup();
|
898
806
|
const internalOptions = {
|
899
807
|
reactDom: ReactDOM,
|
900
808
|
render: (reactComponent, el, reactDomToUse) => {
|
901
809
|
lastReactDom = (reactDomToUse || ReactDOM);
|
902
810
|
return lastReactDom.render(reactComponent, el);
|
903
811
|
},
|
904
|
-
unmount,
|
812
|
+
unmount: internalUnmount,
|
905
813
|
cleanup,
|
906
814
|
};
|
907
815
|
return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
|
908
816
|
}
|
909
|
-
|
817
|
+
/**
|
818
|
+
* Unmounts the component from the DOM.
|
819
|
+
* @internal
|
820
|
+
* @param options - Options for unmounting.
|
821
|
+
*/
|
822
|
+
function internalUnmount(options = { log: true }) {
|
910
823
|
return makeUnmountFn(options);
|
824
|
+
}
|
825
|
+
/**
|
826
|
+
* Removed as of Cypress 11.0.0.
|
827
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
828
|
+
*/
|
829
|
+
function unmount(options = { log: true }) {
|
830
|
+
// @ts-expect-error - undocumented API
|
831
|
+
Cypress.utils.throwErrByPath('mount.unmount');
|
911
832
|
}
|
912
833
|
|
913
|
-
// mounting hooks inside a test component mostly copied from
|
914
|
-
// https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
|
915
|
-
function resultContainer() {
|
916
|
-
let value = null;
|
917
|
-
let error = null;
|
918
|
-
const resolvers = [];
|
919
|
-
const result = {
|
920
|
-
get current() {
|
921
|
-
if (error) {
|
922
|
-
throw error;
|
923
|
-
}
|
924
|
-
return value;
|
925
|
-
},
|
926
|
-
get error() {
|
927
|
-
return error;
|
928
|
-
},
|
929
|
-
};
|
930
|
-
const updateResult = (val, err = null) => {
|
931
|
-
value = val;
|
932
|
-
error = err;
|
933
|
-
resolvers.splice(0, resolvers.length).forEach((resolve) => resolve());
|
934
|
-
};
|
935
|
-
return {
|
936
|
-
result,
|
937
|
-
addResolver: (resolver) => {
|
938
|
-
resolvers.push(resolver);
|
939
|
-
},
|
940
|
-
setValue: (val) => updateResult(val),
|
941
|
-
setError: (err) => updateResult(undefined, err),
|
942
|
-
};
|
943
|
-
}
|
944
|
-
function TestHook({ callback, onError, children }) {
|
945
|
-
try {
|
946
|
-
children(callback());
|
947
|
-
}
|
948
|
-
catch (err) {
|
949
|
-
if ('then' in err) {
|
950
|
-
throw err;
|
951
|
-
}
|
952
|
-
else {
|
953
|
-
onError(err);
|
954
|
-
}
|
955
|
-
}
|
956
|
-
return null;
|
957
|
-
}
|
958
834
|
/**
|
959
835
|
* Mounts a React hook function in a test component for testing.
|
960
|
-
*
|
836
|
+
* Removed as of Cypress 11.0.0.
|
837
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
961
838
|
*/
|
962
839
|
const mountHook = (hookFn) => {
|
963
|
-
|
964
|
-
|
965
|
-
callback: hookFn,
|
966
|
-
onError: setError,
|
967
|
-
children: setValue,
|
968
|
-
});
|
969
|
-
return mount(componentTest).then(() => result);
|
840
|
+
// @ts-expect-error - internal API
|
841
|
+
Cypress.utils.throwErrByPath('mount.mount_hook');
|
970
842
|
};
|
971
843
|
|
972
|
-
export { createMount, makeMountFn, makeUnmountFn, mount, mountHook, unmount };
|
844
|
+
export { createMount, getContainerEl, makeMountFn, makeUnmountFn, mount, mountHook, unmount };
|
package/react/dist/index.d.ts
CHANGED
@@ -1,4 +1,111 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
/// <reference types="cypress" />
|
2
|
+
|
3
|
+
import * as React from 'react';
|
4
|
+
import React__default from 'react';
|
5
|
+
import * as react_dom from 'react-dom';
|
6
|
+
|
7
|
+
interface UnmountArgs {
|
8
|
+
log: boolean;
|
9
|
+
boundComponentMessage?: string;
|
10
|
+
}
|
11
|
+
declare type MountOptions = Partial<MountReactComponentOptions>;
|
12
|
+
interface MountReactComponentOptions {
|
13
|
+
ReactDom: typeof react_dom;
|
14
|
+
/**
|
15
|
+
* Log the mounting command into Cypress Command Log,
|
16
|
+
* true by default.
|
17
|
+
*/
|
18
|
+
log: boolean;
|
19
|
+
/**
|
20
|
+
* Render component in React [strict mode](https://reactjs.org/docs/strict-mode.html)
|
21
|
+
* It activates additional checks and warnings for child components.
|
22
|
+
*/
|
23
|
+
strict: boolean;
|
24
|
+
}
|
25
|
+
interface InternalMountOptions {
|
26
|
+
reactDom: typeof react_dom;
|
27
|
+
render: (reactComponent: ReturnType<typeof React__default.createElement>, el: HTMLElement, reactDomToUse: typeof react_dom) => void;
|
28
|
+
unmount: (options: UnmountArgs) => void;
|
29
|
+
cleanup: () => boolean;
|
30
|
+
}
|
31
|
+
interface MountReturn {
|
32
|
+
/**
|
33
|
+
* The component that was rendered.
|
34
|
+
*/
|
35
|
+
component: React__default.ReactNode;
|
36
|
+
/**
|
37
|
+
* Rerenders the specified component with new props. This allows testing of components that store state (`setState`)
|
38
|
+
* or have asynchronous updates (`useEffect`, `useLayoutEffect`).
|
39
|
+
*/
|
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
|
+
}
|
49
|
+
|
50
|
+
/**
|
51
|
+
* Create an `mount` function. Performs all the non-React-version specific
|
52
|
+
* behavior related to mounting. The React-version-specific code
|
53
|
+
* is injected. This helps us to maintain a consistent public API
|
54
|
+
* and handle breaking changes in React's rendering API.
|
55
|
+
*
|
56
|
+
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
57
|
+
* or people writing adapters for third-party, custom adapters.
|
58
|
+
*/
|
59
|
+
declare const makeMountFn: (type: 'mount' | 'rerender', jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string, internalMountOptions?: InternalMountOptions) => globalThis.Cypress.Chainable<MountReturn>;
|
60
|
+
/**
|
61
|
+
* Create an `unmount` function. Performs all the non-React-version specific
|
62
|
+
* behavior related to unmounting.
|
63
|
+
*
|
64
|
+
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
65
|
+
* or people writing adapters for third-party, custom adapters.
|
66
|
+
*
|
67
|
+
* @param {UnmountArgs} options used during unmounting
|
68
|
+
*/
|
69
|
+
declare const makeUnmountFn: (options: UnmountArgs) => Cypress.Chainable<undefined>;
|
70
|
+
declare const createMount: (defaultOptions: MountOptions) => (element: React.ReactElement, options?: MountOptions) => Cypress.Chainable<MountReturn>;
|
71
|
+
|
72
|
+
/**
|
73
|
+
* Gets the root element used to mount the component.
|
74
|
+
* @returns {HTMLElement} The root element
|
75
|
+
* @throws {Error} If the root element is not found
|
76
|
+
*/
|
77
|
+
declare const getContainerEl: () => HTMLElement;
|
78
|
+
|
79
|
+
/**
|
80
|
+
* 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.
|
85
|
+
* @example
|
86
|
+
* import { mount } from '@cypress/react'
|
87
|
+
* import { Stepper } from './Stepper'
|
88
|
+
*
|
89
|
+
* it('mounts', () => {
|
90
|
+
* mount(<StepperComponent />)
|
91
|
+
* cy.get('[data-cy=increment]').click()
|
92
|
+
* cy.get('[data-cy=counter]').should('have.text', '1')
|
93
|
+
* }
|
94
|
+
*/
|
95
|
+
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
|
+
|
111
|
+
export { InternalMountOptions, MountOptions, MountReactComponentOptions, MountReturn, UnmountArgs, createMount, getContainerEl, makeMountFn, makeUnmountFn, mount, mountHook, unmount };
|
package/react18/CHANGELOG.md
CHANGED
@@ -1,3 +1,16 @@
|
|
1
|
+
# [@cypress/react18-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.1...@cypress/react18-v2.0.0) (2022-11-07)
|
2
|
+
|
3
|
+
|
4
|
+
### Bug Fixes
|
5
|
+
|
6
|
+
* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
|
7
|
+
* remove some CT functions and props ([#24419](https://github.com/cypress-io/cypress/issues/24419)) ([294985f](https://github.com/cypress-io/cypress/commit/294985f8b3e0fa00ed66d25f88c8814603766074))
|
8
|
+
|
9
|
+
|
10
|
+
### BREAKING CHANGES
|
11
|
+
|
12
|
+
* remove last mounted component upon subsequent mount calls of mount
|
13
|
+
|
1
14
|
# [@cypress/react18-v1.1.1](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.0...@cypress/react18-v1.1.1) (2022-10-13)
|
2
15
|
|
3
16
|
|