cypress 10.2.0 → 10.4.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/lib/exec/open.js +7 -2
- package/lib/exec/spawn.js +7 -2
- package/mount-utils/CHANGELOG.md +0 -1
- package/mount-utils/README.md +7 -0
- package/mount-utils/dist/index.js +8 -1
- package/mount-utils/package.json +1 -0
- package/package.json +20 -10
- package/react/CHANGELOG.md +0 -19
- package/react/README.md +28 -323
- package/react/dist/createMount.d.ts +30 -0
- package/react/dist/cypress-react.cjs.js +76 -80
- package/react/dist/cypress-react.esm-bundler.js +68 -76
- package/react/dist/getDisplayName.d.ts +1 -1
- package/react/dist/index.d.ts +2 -0
- package/react/dist/mount.d.ts +5 -141
- package/react/dist/types.d.ts +50 -0
- package/react/package.json +1 -5
- package/react18/dist/cypress-react.cjs.js +422 -0
- package/react18/dist/cypress-react.esm-bundler.js +394 -0
- package/react18/dist/index.d.ts +5 -0
- package/react18/package.json +59 -0
- package/types/cypress.d.ts +11 -2
- package/types/index.d.ts +1 -1
- package/types/{net-stubbing.ts → net-stubbing.d.ts} +0 -0
- package/vue/CHANGELOG.md +2 -17
- package/vue/README.md +17 -607
- package/vue/dist/@vue/test-utils/baseWrapper.d.ts +63 -0
- package/vue/dist/@vue/test-utils/components/RouterLinkStub.d.ts +21 -0
- package/vue/dist/@vue/test-utils/config.d.ts +30 -0
- package/vue/dist/@vue/test-utils/constants/dom-events.d.ts +900 -0
- package/vue/dist/@vue/test-utils/createDomEvent.d.ts +9 -0
- package/vue/dist/@vue/test-utils/domWrapper.d.ts +18 -0
- package/vue/dist/@vue/test-utils/emit.d.ts +5 -0
- package/vue/dist/@vue/test-utils/errorWrapper.d.ts +1 -0
- package/vue/dist/@vue/test-utils/index.d.ts +11 -0
- package/vue/dist/@vue/test-utils/interfaces/wrapperLike.d.ts +56 -0
- package/vue/dist/@vue/test-utils/mount.d.ts +35 -0
- package/vue/dist/@vue/test-utils/stubs.d.ts +22 -0
- package/vue/dist/@vue/test-utils/types.d.ts +125 -0
- package/vue/dist/@vue/test-utils/utils/autoUnmount.d.ts +5 -0
- package/vue/dist/@vue/test-utils/utils/compileSlots.d.ts +2 -0
- package/vue/dist/@vue/test-utils/utils/componentName.d.ts +4 -0
- package/vue/dist/@vue/test-utils/utils/find.d.ts +10 -0
- package/vue/dist/@vue/test-utils/utils/flushPromises.d.ts +1 -0
- package/vue/dist/@vue/test-utils/utils/getRootNodes.d.ts +2 -0
- package/vue/dist/@vue/test-utils/utils/isElement.d.ts +1 -0
- package/vue/dist/@vue/test-utils/utils/isElementVisible.d.ts +6 -0
- package/vue/dist/@vue/test-utils/utils/matchName.d.ts +1 -0
- package/vue/dist/@vue/test-utils/utils/stringifyNode.d.ts +1 -0
- package/vue/dist/@vue/test-utils/utils/vueCompatSupport.d.ts +8 -0
- package/vue/dist/@vue/test-utils/utils/vueShared.d.ts +3 -0
- package/vue/dist/@vue/test-utils/utils.d.ts +13 -0
- package/vue/dist/@vue/test-utils/vueWrapper.d.ts +35 -0
- package/vue/dist/@vue/test-utils/wrapperFactory.d.ts +14 -0
- package/vue/dist/cypress-vue.cjs.js +5583 -5209
- package/vue/dist/cypress-vue.esm-bundler.js +5584 -5211
- package/vue/dist/index.d.ts +35 -3
- package/vue/package.json +11 -7
- package/vue2/README.md +11 -627
- package/vue2/dist/cypress-vue2.browser.js +268 -262
- package/vue2/dist/cypress-vue2.cjs.js +267 -261
- package/vue2/dist/cypress-vue2.esm-bundler.js +265 -259
- package/vue2/package.json +1 -1
- package/react/dist/cypress-react.browser.js +0 -497
@@ -0,0 +1,50 @@
|
|
1
|
+
/// <reference types="cypress" />
|
2
|
+
import type React from 'react';
|
3
|
+
import type { StyleOptions } from '@cypress/mount-utils';
|
4
|
+
export interface UnmountArgs {
|
5
|
+
log: boolean;
|
6
|
+
boundComponentMessage?: string;
|
7
|
+
}
|
8
|
+
export interface InternalUnmountOptionsReact {
|
9
|
+
unmount: (el: HTMLElement) => boolean;
|
10
|
+
}
|
11
|
+
export interface InternalUnmountOptionsReact18 {
|
12
|
+
unmount: () => boolean;
|
13
|
+
}
|
14
|
+
export declare type InternalUnmountOptions = InternalUnmountOptionsReact | InternalUnmountOptionsReact18;
|
15
|
+
export declare type MountOptions = Partial<StyleOptions & MountReactComponentOptions>;
|
16
|
+
export interface MountReactComponentOptions {
|
17
|
+
alias: string;
|
18
|
+
ReactDom: typeof import('react-dom');
|
19
|
+
/**
|
20
|
+
* Log the mounting command into Cypress Command Log,
|
21
|
+
* true by default.
|
22
|
+
*/
|
23
|
+
log: boolean;
|
24
|
+
/**
|
25
|
+
* Render component in React [strict mode](https://reactjs.org/docs/strict-mode.html)
|
26
|
+
* It activates additional checks and warnings for child components.
|
27
|
+
*/
|
28
|
+
strict: boolean;
|
29
|
+
}
|
30
|
+
export interface InternalMountOptions {
|
31
|
+
reactDom: typeof import('react-dom');
|
32
|
+
render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement, reactDomToUse: typeof import('react-dom')) => void;
|
33
|
+
unmount: (options: UnmountArgs) => void;
|
34
|
+
}
|
35
|
+
export interface MountReturn {
|
36
|
+
/**
|
37
|
+
* The component that was rendered.
|
38
|
+
*/
|
39
|
+
component: React.ReactNode;
|
40
|
+
/**
|
41
|
+
* Rerenders the specified component with new props. This allows testing of components that store state (`setState`)
|
42
|
+
* or have asynchronous updates (`useEffect`, `useLayoutEffect`).
|
43
|
+
*/
|
44
|
+
rerender: (component: React.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
|
45
|
+
/**
|
46
|
+
* Removes the mounted component.
|
47
|
+
* @see `unmount`
|
48
|
+
*/
|
49
|
+
unmount: (payload: UnmountArgs) => void;
|
50
|
+
}
|
package/react/package.json
CHANGED
@@ -14,9 +14,6 @@
|
|
14
14
|
"test": "yarn cy:run",
|
15
15
|
"watch": "yarn build --watch --watch.exclude ./dist/**/*"
|
16
16
|
},
|
17
|
-
"dependencies": {
|
18
|
-
"debug": "^4.3.2"
|
19
|
-
},
|
20
17
|
"devDependencies": {
|
21
18
|
"@cypress/mount-utils": "0.0.0-development",
|
22
19
|
"@rollup/plugin-commonjs": "^17.1.0",
|
@@ -24,7 +21,6 @@
|
|
24
21
|
"@vitejs/plugin-react": "1.3.1",
|
25
22
|
"axios": "0.21.2",
|
26
23
|
"cypress": "0.0.0-development",
|
27
|
-
"cypress-plugin-snapshots": "1.4.4",
|
28
24
|
"prop-types": "15.7.2",
|
29
25
|
"react": "16.8.6",
|
30
26
|
"react-dom": "16.8.6",
|
@@ -33,7 +29,7 @@
|
|
33
29
|
"rollup": "^2.38.5",
|
34
30
|
"rollup-plugin-typescript2": "^0.29.0",
|
35
31
|
"typescript": "^4.2.3",
|
36
|
-
"vite": "
|
32
|
+
"vite": "3.0.3",
|
37
33
|
"vite-plugin-require-transform": "1.0.3"
|
38
34
|
},
|
39
35
|
"peerDependencies": {
|
@@ -0,0 +1,422 @@
|
|
1
|
+
|
2
|
+
/**
|
3
|
+
* @cypress/react18 v0.0.0-development
|
4
|
+
* (c) 2022 Cypress.io
|
5
|
+
* Released under the MIT License
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var ReactDOM = require('react-dom/client');
|
13
|
+
var React = require('react');
|
14
|
+
require('react-dom');
|
15
|
+
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
17
|
+
|
18
|
+
function _interopNamespace(e) {
|
19
|
+
if (e && e.__esModule) return e;
|
20
|
+
var n = Object.create(null);
|
21
|
+
if (e) {
|
22
|
+
Object.keys(e).forEach(function (k) {
|
23
|
+
if (k !== 'default') {
|
24
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
25
|
+
Object.defineProperty(n, k, d.get ? d : {
|
26
|
+
enumerable: true,
|
27
|
+
get: function () { return e[k]; }
|
28
|
+
});
|
29
|
+
}
|
30
|
+
});
|
31
|
+
}
|
32
|
+
n["default"] = e;
|
33
|
+
return Object.freeze(n);
|
34
|
+
}
|
35
|
+
|
36
|
+
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
37
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
38
|
+
|
39
|
+
/******************************************************************************
|
40
|
+
Copyright (c) Microsoft Corporation.
|
41
|
+
|
42
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
43
|
+
purpose with or without fee is hereby granted.
|
44
|
+
|
45
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
46
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
47
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
48
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
49
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
50
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
51
|
+
PERFORMANCE OF THIS SOFTWARE.
|
52
|
+
***************************************************************************** */
|
53
|
+
|
54
|
+
var __assign = function() {
|
55
|
+
__assign = Object.assign || function __assign(t) {
|
56
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
57
|
+
s = arguments[i];
|
58
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
59
|
+
}
|
60
|
+
return t;
|
61
|
+
};
|
62
|
+
return __assign.apply(this, arguments);
|
63
|
+
};
|
64
|
+
|
65
|
+
var cachedDisplayNames = new WeakMap();
|
66
|
+
/**
|
67
|
+
* Gets the display name of the component when possible.
|
68
|
+
* @param type {JSX} The type object returned from creating the react element.
|
69
|
+
* @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
|
70
|
+
* @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
|
71
|
+
*/
|
72
|
+
function getDisplayName(type, fallbackName) {
|
73
|
+
if (fallbackName === void 0) { fallbackName = 'Unknown'; }
|
74
|
+
var nameFromCache = cachedDisplayNames.get(type);
|
75
|
+
if (nameFromCache != null) {
|
76
|
+
return nameFromCache;
|
77
|
+
}
|
78
|
+
var displayName = null;
|
79
|
+
// The displayName property is not guaranteed to be a string.
|
80
|
+
// It's only safe to use for our purposes if it's a string.
|
81
|
+
// github.com/facebook/react-devtools/issues/803
|
82
|
+
if (typeof type.displayName === 'string') {
|
83
|
+
displayName = type.displayName;
|
84
|
+
}
|
85
|
+
if (!displayName) {
|
86
|
+
displayName = type.name || fallbackName;
|
87
|
+
}
|
88
|
+
// Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
|
89
|
+
// We need displayName with module name for error reports but it clutters the DevTools.
|
90
|
+
var match = displayName.match(/^(.*) \[from (.*)\]$/);
|
91
|
+
if (match) {
|
92
|
+
var componentName = match[1];
|
93
|
+
var moduleName = match[2];
|
94
|
+
if (componentName && moduleName) {
|
95
|
+
if (moduleName === componentName ||
|
96
|
+
moduleName.startsWith(componentName + ".")) {
|
97
|
+
displayName = componentName;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
try {
|
102
|
+
cachedDisplayNames.set(type, displayName);
|
103
|
+
}
|
104
|
+
catch (e) {
|
105
|
+
// do nothing
|
106
|
+
}
|
107
|
+
return displayName;
|
108
|
+
}
|
109
|
+
|
110
|
+
const ROOT_SELECTOR = '[data-cy-root]';
|
111
|
+
const getContainerEl = () => {
|
112
|
+
const el = document.querySelector(ROOT_SELECTOR);
|
113
|
+
if (el) {
|
114
|
+
return el;
|
115
|
+
}
|
116
|
+
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.`);
|
117
|
+
};
|
118
|
+
/**
|
119
|
+
* Remove any style or extra link elements from the iframe placeholder
|
120
|
+
* left from any previous test
|
121
|
+
*
|
122
|
+
*/
|
123
|
+
function cleanupStyles() {
|
124
|
+
const styles = document.body.querySelectorAll('[data-cy=injected-style-tag]');
|
125
|
+
styles.forEach((styleElement) => {
|
126
|
+
if (styleElement.parentElement) {
|
127
|
+
styleElement.parentElement.removeChild(styleElement);
|
128
|
+
}
|
129
|
+
});
|
130
|
+
const links = document.body.querySelectorAll('[data-cy=injected-stylesheet]');
|
131
|
+
links.forEach((link) => {
|
132
|
+
if (link.parentElement) {
|
133
|
+
link.parentElement.removeChild(link);
|
134
|
+
}
|
135
|
+
});
|
136
|
+
}
|
137
|
+
/**
|
138
|
+
* Insert links to external style resources.
|
139
|
+
*/
|
140
|
+
function insertStylesheets(stylesheets, document, el) {
|
141
|
+
stylesheets.forEach((href) => {
|
142
|
+
const link = document.createElement('link');
|
143
|
+
link.type = 'text/css';
|
144
|
+
link.rel = 'stylesheet';
|
145
|
+
link.href = href;
|
146
|
+
link.dataset.cy = 'injected-stylesheet';
|
147
|
+
document.body.insertBefore(link, el);
|
148
|
+
});
|
149
|
+
}
|
150
|
+
/**
|
151
|
+
* Inserts a single stylesheet element
|
152
|
+
*/
|
153
|
+
function insertStyles(styles, document, el) {
|
154
|
+
styles.forEach((style) => {
|
155
|
+
const styleElement = document.createElement('style');
|
156
|
+
styleElement.dataset.cy = 'injected-style-tag';
|
157
|
+
styleElement.appendChild(document.createTextNode(style));
|
158
|
+
document.body.insertBefore(styleElement, el);
|
159
|
+
});
|
160
|
+
}
|
161
|
+
function insertSingleCssFile(cssFilename, document, el, log) {
|
162
|
+
return cy.readFile(cssFilename, { log }).then((css) => {
|
163
|
+
const style = document.createElement('style');
|
164
|
+
style.appendChild(document.createTextNode(css));
|
165
|
+
document.body.insertBefore(style, el);
|
166
|
+
});
|
167
|
+
}
|
168
|
+
/**
|
169
|
+
* Reads the given CSS file from local file system
|
170
|
+
* and adds the loaded style text as an element.
|
171
|
+
*/
|
172
|
+
function insertLocalCssFiles(cssFilenames, document, el, log) {
|
173
|
+
return Cypress.Promise.mapSeries(cssFilenames, (cssFilename) => {
|
174
|
+
return insertSingleCssFile(cssFilename, document, el, log);
|
175
|
+
});
|
176
|
+
}
|
177
|
+
/**
|
178
|
+
* Injects custom style text or CSS file or 3rd party style resources
|
179
|
+
* into the given document.
|
180
|
+
*/
|
181
|
+
const injectStylesBeforeElement = (options, document, el) => {
|
182
|
+
if (!el)
|
183
|
+
return;
|
184
|
+
// first insert all stylesheets as Link elements
|
185
|
+
let stylesheets = [];
|
186
|
+
if (typeof options.stylesheet === 'string') {
|
187
|
+
stylesheets.push(options.stylesheet);
|
188
|
+
}
|
189
|
+
else if (Array.isArray(options.stylesheet)) {
|
190
|
+
stylesheets = stylesheets.concat(options.stylesheet);
|
191
|
+
}
|
192
|
+
if (typeof options.stylesheets === 'string') {
|
193
|
+
options.stylesheets = [options.stylesheets];
|
194
|
+
}
|
195
|
+
if (options.stylesheets) {
|
196
|
+
stylesheets = stylesheets.concat(options.stylesheets);
|
197
|
+
}
|
198
|
+
insertStylesheets(stylesheets, document, el);
|
199
|
+
// insert any styles as <style>...</style> elements
|
200
|
+
let styles = [];
|
201
|
+
if (typeof options.style === 'string') {
|
202
|
+
styles.push(options.style);
|
203
|
+
}
|
204
|
+
else if (Array.isArray(options.style)) {
|
205
|
+
styles = styles.concat(options.style);
|
206
|
+
}
|
207
|
+
if (typeof options.styles === 'string') {
|
208
|
+
styles.push(options.styles);
|
209
|
+
}
|
210
|
+
else if (Array.isArray(options.styles)) {
|
211
|
+
styles = styles.concat(options.styles);
|
212
|
+
}
|
213
|
+
insertStyles(styles, document, el);
|
214
|
+
// now load any css files by path and add their content
|
215
|
+
// as <style>...</style> elements
|
216
|
+
let cssFiles = [];
|
217
|
+
if (typeof options.cssFile === 'string') {
|
218
|
+
cssFiles.push(options.cssFile);
|
219
|
+
}
|
220
|
+
else if (Array.isArray(options.cssFile)) {
|
221
|
+
cssFiles = cssFiles.concat(options.cssFile);
|
222
|
+
}
|
223
|
+
if (typeof options.cssFiles === 'string') {
|
224
|
+
cssFiles.push(options.cssFiles);
|
225
|
+
}
|
226
|
+
else if (Array.isArray(options.cssFiles)) {
|
227
|
+
cssFiles = cssFiles.concat(options.cssFiles);
|
228
|
+
}
|
229
|
+
return insertLocalCssFiles(cssFiles, document, el, options.log);
|
230
|
+
};
|
231
|
+
function setupHooks(optionalCallback) {
|
232
|
+
// Consumed by the framework "mount" libs. A user might register their own mount in the scaffolded 'commands.js'
|
233
|
+
// file that is imported by e2e and component support files by default. We don't want CT side effects to run when e2e
|
234
|
+
// testing so we early return.
|
235
|
+
// System test to verify CT side effects do not pollute e2e: system-tests/test/e2e_with_mount_import_spec.ts
|
236
|
+
if (Cypress.testingType !== 'component') {
|
237
|
+
return;
|
238
|
+
}
|
239
|
+
// When running component specs, we cannot allow "cy.visit"
|
240
|
+
// because it will wipe out our preparation work, and does not make much sense
|
241
|
+
// thus we overwrite "cy.visit" to throw an error
|
242
|
+
Cypress.Commands.overwrite('visit', () => {
|
243
|
+
throw new Error('cy.visit from a component spec is not allowed');
|
244
|
+
});
|
245
|
+
// @ts-ignore
|
246
|
+
Cypress.on('test:before:run', () => {
|
247
|
+
optionalCallback === null || optionalCallback === void 0 ? void 0 : optionalCallback();
|
248
|
+
cleanupStyles();
|
249
|
+
});
|
250
|
+
}
|
251
|
+
|
252
|
+
/**
|
253
|
+
* Inject custom style text or CSS file or 3rd party style resources
|
254
|
+
*/
|
255
|
+
var injectStyles = function (options) {
|
256
|
+
return function () {
|
257
|
+
var el = getContainerEl();
|
258
|
+
return injectStylesBeforeElement(options, document, el);
|
259
|
+
};
|
260
|
+
};
|
261
|
+
var lastMountedReactDom;
|
262
|
+
/**
|
263
|
+
* Create an `mount` function. Performs all the non-React-version specific
|
264
|
+
* behavior related to mounting. The React-version-specific code
|
265
|
+
* is injected. This helps us to maintain a consistent public API
|
266
|
+
* and handle breaking changes in React's rendering API.
|
267
|
+
*
|
268
|
+
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
269
|
+
* or people writing adapters for third-party, custom adapters.
|
270
|
+
*/
|
271
|
+
var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOptions) {
|
272
|
+
if (options === void 0) { options = {}; }
|
273
|
+
if (!internalMountOptions) {
|
274
|
+
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
275
|
+
}
|
276
|
+
// Get the display name property via the component constructor
|
277
|
+
// @ts-ignore FIXME
|
278
|
+
var componentName = getDisplayName(jsx.type, options.alias);
|
279
|
+
var displayName = options.alias || componentName;
|
280
|
+
var jsxComponentName = "<" + componentName + " ... />";
|
281
|
+
var message = options.alias
|
282
|
+
? jsxComponentName + " as \"" + options.alias + "\""
|
283
|
+
: jsxComponentName;
|
284
|
+
return cy
|
285
|
+
.then(injectStyles(options))
|
286
|
+
.then(function () {
|
287
|
+
var _a, _b, _c;
|
288
|
+
var reactDomToUse = internalMountOptions.reactDom;
|
289
|
+
lastMountedReactDom = reactDomToUse;
|
290
|
+
var el = getContainerEl();
|
291
|
+
if (!el) {
|
292
|
+
throw new Error([
|
293
|
+
"[@cypress/react] \uD83D\uDD25 Hmm, cannot find root element to mount the component. Searched for " + ROOT_SELECTOR,
|
294
|
+
].join(' '));
|
295
|
+
}
|
296
|
+
var key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
|
297
|
+
// @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
|
298
|
+
(((_c = (_b = (_a = Cypress === null || Cypress === void 0 ? void 0 : Cypress.mocha) === null || _a === void 0 ? void 0 : _a.getRunner()) === null || _b === void 0 ? void 0 : _b.test) === null || _c === void 0 ? void 0 : _c.title) || '') + Math.random();
|
299
|
+
var props = {
|
300
|
+
key: key,
|
301
|
+
};
|
302
|
+
var reactComponent = React__namespace.createElement(options.strict ? React__namespace.StrictMode : React__namespace.Fragment, props, jsx);
|
303
|
+
// since we always surround the component with a fragment
|
304
|
+
// let's get back the original component
|
305
|
+
var userComponent = reactComponent.props.children;
|
306
|
+
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
307
|
+
if (options.log !== false) {
|
308
|
+
Cypress.log({
|
309
|
+
name: type,
|
310
|
+
type: 'parent',
|
311
|
+
message: [message],
|
312
|
+
// @ts-ignore
|
313
|
+
$el: el.children.item(0),
|
314
|
+
consoleProps: function () {
|
315
|
+
return {
|
316
|
+
// @ts-ignore protect the use of jsx functional components use ReactNode
|
317
|
+
props: jsx.props,
|
318
|
+
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
|
319
|
+
home: 'https://github.com/cypress-io/cypress',
|
320
|
+
};
|
321
|
+
},
|
322
|
+
}).snapshot('mounted').end();
|
323
|
+
}
|
324
|
+
return (
|
325
|
+
// Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
|
326
|
+
cy.wrap(userComponent, { log: false })
|
327
|
+
.as(displayName)
|
328
|
+
.then(function () {
|
329
|
+
return cy.wrap({
|
330
|
+
component: userComponent,
|
331
|
+
rerender: function (newComponent) { return makeMountFn('rerender', newComponent, options, key, internalMountOptions); },
|
332
|
+
unmount: internalMountOptions.unmount,
|
333
|
+
}, { log: false });
|
334
|
+
})
|
335
|
+
// by waiting, we delaying test execution for the next tick of event loop
|
336
|
+
// and letting hooks and component lifecycle methods to execute mount
|
337
|
+
// https://github.com/bahmutov/cypress-react-unit-test/issues/200
|
338
|
+
.wait(0, { log: false }));
|
339
|
+
// Bluebird types are terrible. I don't think the return type can be carried without this cast
|
340
|
+
});
|
341
|
+
};
|
342
|
+
/**
|
343
|
+
* Create an `unmount` function. Performs all the non-React-version specific
|
344
|
+
* behavior related to unmounting.
|
345
|
+
*
|
346
|
+
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
347
|
+
* or people writing adapters for third-party, custom adapters.
|
348
|
+
*/
|
349
|
+
var makeUnmountFn = function (options, internalUnmountOptions) {
|
350
|
+
return cy.then(function () {
|
351
|
+
return cy.get(ROOT_SELECTOR, { log: false }).then(function ($el) {
|
352
|
+
var _a;
|
353
|
+
if (lastMountedReactDom) {
|
354
|
+
internalUnmountOptions.unmount($el[0]);
|
355
|
+
var wasUnmounted = internalUnmountOptions.unmount($el[0]);
|
356
|
+
if (wasUnmounted && options.log) {
|
357
|
+
Cypress.log({
|
358
|
+
name: 'unmount',
|
359
|
+
type: 'parent',
|
360
|
+
message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
|
361
|
+
consoleProps: function () {
|
362
|
+
return {
|
363
|
+
description: 'Unmounts React component',
|
364
|
+
parent: $el[0],
|
365
|
+
home: 'https://github.com/cypress-io/cypress',
|
366
|
+
};
|
367
|
+
},
|
368
|
+
});
|
369
|
+
}
|
370
|
+
}
|
371
|
+
});
|
372
|
+
});
|
373
|
+
};
|
374
|
+
// Cleanup before each run
|
375
|
+
// NOTE: we cannot use unmount here because
|
376
|
+
// we are not in the context of a test
|
377
|
+
var preMountCleanup = function () {
|
378
|
+
var el = getContainerEl();
|
379
|
+
if (el && lastMountedReactDom) {
|
380
|
+
lastMountedReactDom.unmountComponentAtNode(el);
|
381
|
+
}
|
382
|
+
};
|
383
|
+
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
|
384
|
+
// by creating an explicit function/import that the user can register in their 'component.js' support file,
|
385
|
+
// such as:
|
386
|
+
// import 'cypress/<my-framework>/support'
|
387
|
+
// or
|
388
|
+
// import { registerCT } from 'cypress/<my-framework>'
|
389
|
+
// registerCT()
|
390
|
+
// Note: This would be a breaking change
|
391
|
+
// it is required to unmount component in beforeEach hook in order to provide a clean state inside test
|
392
|
+
// because `mount` can be called after some preparation that can side effect unmount
|
393
|
+
// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
|
394
|
+
setupHooks(preMountCleanup);
|
395
|
+
|
396
|
+
var root;
|
397
|
+
function mount(jsx, options, rerenderKey) {
|
398
|
+
if (options === void 0) { options = {}; }
|
399
|
+
var internalOptions = {
|
400
|
+
reactDom: ReactDOM__default["default"],
|
401
|
+
render: function (reactComponent, el) {
|
402
|
+
root = ReactDOM__default["default"].createRoot(el);
|
403
|
+
return root.render(reactComponent);
|
404
|
+
},
|
405
|
+
unmount: unmount,
|
406
|
+
};
|
407
|
+
return makeMountFn('mount', jsx, __assign({ ReactDom: ReactDOM__default["default"] }, options), rerenderKey, internalOptions);
|
408
|
+
}
|
409
|
+
function unmount(options) {
|
410
|
+
if (options === void 0) { options = { log: true }; }
|
411
|
+
var internalOptions = {
|
412
|
+
// type is ReturnType<typeof ReactDOM.createRoot>
|
413
|
+
unmount: function () {
|
414
|
+
root.unmount();
|
415
|
+
return true;
|
416
|
+
},
|
417
|
+
};
|
418
|
+
return makeUnmountFn(options, internalOptions);
|
419
|
+
}
|
420
|
+
|
421
|
+
exports.mount = mount;
|
422
|
+
exports.unmount = unmount;
|