cypress 13.11.0 → 13.13.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/angular/dist/index.d.ts +1 -2
- package/angular/angular/dist/index.js +239 -239
- package/angular/angular/package.json +1 -1
- package/angular/dist/index.d.ts +1 -2
- package/angular/dist/index.js +239 -239
- package/angular/package.json +1 -1
- package/angular-signals/README.md +11 -0
- package/angular-signals/angular-signals/README.md +11 -0
- package/angular-signals/angular-signals/dist/index.d.ts +136 -0
- package/angular-signals/angular-signals/dist/index.js +1861 -0
- package/angular-signals/angular-signals/package.json +74 -0
- package/angular-signals/dist/index.d.ts +136 -0
- package/angular-signals/dist/index.js +1861 -0
- package/angular-signals/package.json +74 -0
- package/lib/cli.js +0 -1
- package/lib/exec/xvfb.js +0 -1
- package/lib/logger.js +0 -3
- package/mount-utils/dist/index.d.ts +1 -1
- package/mount-utils/mount-utils/dist/index.d.ts +1 -1
- package/mount-utils/mount-utils/package.json +1 -1
- package/mount-utils/package.json +1 -1
- package/package.json +11 -5
- package/react/dist/cypress-react.cjs.js +237 -237
- package/react/dist/cypress-react.esm-bundler.js +237 -237
- package/react/dist/index.d.ts +1 -1
- package/react/package.json +3 -3
- package/react/react/dist/cypress-react.cjs.js +237 -237
- package/react/react/dist/cypress-react.esm-bundler.js +237 -237
- package/react/react/dist/index.d.ts +1 -1
- package/react/react/package.json +3 -3
- package/react18/dist/cypress-react.cjs.js +222 -222
- package/react18/dist/cypress-react.esm-bundler.js +222 -222
- package/react18/dist/index.d.ts +1 -1
- package/react18/package.json +1 -1
- package/react18/react18/dist/cypress-react.cjs.js +222 -222
- package/react18/react18/dist/cypress-react.esm-bundler.js +222 -222
- package/react18/react18/dist/index.d.ts +1 -1
- package/react18/react18/package.json +1 -1
- package/svelte/dist/cypress-svelte.cjs.js +61 -61
- package/svelte/dist/cypress-svelte.esm-bundler.js +61 -61
- package/svelte/dist/index.d.ts +2 -2
- package/svelte/package.json +1 -1
- package/svelte/svelte/dist/cypress-svelte.cjs.js +61 -61
- package/svelte/svelte/dist/cypress-svelte.esm-bundler.js +61 -61
- package/svelte/svelte/dist/index.d.ts +2 -2
- package/svelte/svelte/package.json +1 -1
- package/vue/dist/cypress-vue.cjs.js +128 -128
- package/vue/dist/cypress-vue.esm-bundler.js +128 -128
- package/vue/dist/index.d.ts +5 -5
- package/vue/package.json +5 -5
- package/vue/vue/dist/cypress-vue.cjs.js +128 -128
- package/vue/vue/dist/cypress-vue.esm-bundler.js +128 -128
- package/vue/vue/dist/index.d.ts +5 -5
- package/vue/vue/package.json +5 -5
- package/vue2/dist/cypress-vue2.cjs.js +211 -211
- package/vue2/dist/cypress-vue2.esm-bundler.js +211 -211
- package/vue2/dist/index.d.ts +11 -11
- package/vue2/package.json +1 -1
- package/vue2/vue2/dist/cypress-vue2.cjs.js +211 -211
- package/vue2/vue2/dist/cypress-vue2.esm-bundler.js +211 -211
- package/vue2/vue2/dist/index.d.ts +11 -11
- package/vue2/vue2/package.json +1 -1
@@ -23,41 +23,41 @@ const getContainerEl$1 = () => {
|
|
23
23
|
throw Error(`No element found that matches selector ${ROOT_SELECTOR$1}. 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.`);
|
24
24
|
};
|
25
25
|
|
26
|
-
/**
|
27
|
-
* Gets the display name of the component when possible.
|
28
|
-
* @param type {JSX} The type object returned from creating the react element.
|
29
|
-
* @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
|
30
|
-
* @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
|
31
|
-
*/
|
32
|
-
function getDisplayName(node, fallbackName = 'Unknown') {
|
33
|
-
const type = node === null || node === void 0 ? void 0 : node.type;
|
34
|
-
if (!type) {
|
35
|
-
return fallbackName;
|
36
|
-
}
|
37
|
-
let displayName = null;
|
38
|
-
// The displayName property is not guaranteed to be a string.
|
39
|
-
// It's only safe to use for our purposes if it's a string.
|
40
|
-
// github.com/facebook/react-devtools/issues/803
|
41
|
-
if (typeof type.displayName === 'string') {
|
42
|
-
displayName = type.displayName;
|
43
|
-
}
|
44
|
-
if (!displayName) {
|
45
|
-
displayName = type.name || fallbackName;
|
46
|
-
}
|
47
|
-
// Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
|
48
|
-
// We need displayName with module name for error reports but it clutters the DevTools.
|
49
|
-
const match = displayName.match(/^(.*) \[from (.*)\]$/);
|
50
|
-
if (match) {
|
51
|
-
const componentName = match[1];
|
52
|
-
const moduleName = match[2];
|
53
|
-
if (componentName && moduleName) {
|
54
|
-
if (moduleName === componentName ||
|
55
|
-
moduleName.startsWith(`${componentName}.`)) {
|
56
|
-
displayName = componentName;
|
57
|
-
}
|
58
|
-
}
|
59
|
-
}
|
60
|
-
return displayName;
|
26
|
+
/**
|
27
|
+
* Gets the display name of the component when possible.
|
28
|
+
* @param type {JSX} The type object returned from creating the react element.
|
29
|
+
* @param fallbackName {string} The alias, or fallback name to use when the name cannot be derived.
|
30
|
+
* @link https://github.com/facebook/react-devtools/blob/master/backend/getDisplayName.js
|
31
|
+
*/
|
32
|
+
function getDisplayName(node, fallbackName = 'Unknown') {
|
33
|
+
const type = node === null || node === void 0 ? void 0 : node.type;
|
34
|
+
if (!type) {
|
35
|
+
return fallbackName;
|
36
|
+
}
|
37
|
+
let displayName = null;
|
38
|
+
// The displayName property is not guaranteed to be a string.
|
39
|
+
// It's only safe to use for our purposes if it's a string.
|
40
|
+
// github.com/facebook/react-devtools/issues/803
|
41
|
+
if (typeof type.displayName === 'string') {
|
42
|
+
displayName = type.displayName;
|
43
|
+
}
|
44
|
+
if (!displayName) {
|
45
|
+
displayName = type.name || fallbackName;
|
46
|
+
}
|
47
|
+
// Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
|
48
|
+
// We need displayName with module name for error reports but it clutters the DevTools.
|
49
|
+
const match = displayName.match(/^(.*) \[from (.*)\]$/);
|
50
|
+
if (match) {
|
51
|
+
const componentName = match[1];
|
52
|
+
const moduleName = match[2];
|
53
|
+
if (componentName && moduleName) {
|
54
|
+
if (moduleName === componentName ||
|
55
|
+
moduleName.startsWith(`${componentName}.`)) {
|
56
|
+
displayName = componentName;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}
|
60
|
+
return displayName;
|
61
61
|
}
|
62
62
|
|
63
63
|
const ROOT_SELECTOR = '[data-cy-root]';
|
@@ -109,135 +109,135 @@ function setupHooks(optionalCallback) {
|
|
109
109
|
});
|
110
110
|
}
|
111
111
|
|
112
|
-
let mountCleanup;
|
113
|
-
/**
|
114
|
-
* Create an `mount` function. Performs all the non-React-version specific
|
115
|
-
* behavior related to mounting. The React-version-specific code
|
116
|
-
* is injected. This helps us to maintain a consistent public API
|
117
|
-
* and handle breaking changes in React's rendering API.
|
118
|
-
*
|
119
|
-
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
120
|
-
* or people writing adapters for third-party, custom adapters.
|
121
|
-
*/
|
122
|
-
const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
|
123
|
-
if (!internalMountOptions) {
|
124
|
-
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
125
|
-
}
|
126
|
-
// @ts-expect-error - this is removed but we want to check if a user is passing it, and error if they are.
|
127
|
-
if (options.alias) {
|
128
|
-
// @ts-expect-error
|
129
|
-
Cypress.utils.throwErrByPath('mount.alias', options.alias);
|
130
|
-
}
|
131
|
-
checkForRemovedStyleOptions(options);
|
132
|
-
mountCleanup = internalMountOptions.cleanup;
|
133
|
-
return cy
|
134
|
-
.then(() => {
|
135
|
-
var _a, _b, _c;
|
136
|
-
const reactDomToUse = internalMountOptions.reactDom;
|
137
|
-
const el = getContainerEl();
|
138
|
-
if (!el) {
|
139
|
-
throw new Error([
|
140
|
-
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
|
141
|
-
].join(' '));
|
142
|
-
}
|
143
|
-
const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
|
144
|
-
// @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
|
145
|
-
(((_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();
|
146
|
-
const props = {
|
147
|
-
key,
|
148
|
-
};
|
149
|
-
const reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
|
150
|
-
// since we always surround the component with a fragment
|
151
|
-
// let's get back the original component
|
152
|
-
const userComponent = reactComponent.props.children;
|
153
|
-
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
154
|
-
return (cy.wrap(userComponent, { log: false })
|
155
|
-
.then(() => {
|
156
|
-
return cy.wrap({
|
157
|
-
component: userComponent,
|
158
|
-
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
|
159
|
-
unmount: () => {
|
160
|
-
// @ts-expect-error - undocumented API
|
161
|
-
Cypress.utils.throwErrByPath('mount.unmount');
|
162
|
-
},
|
163
|
-
}, { log: false });
|
164
|
-
})
|
165
|
-
// by waiting, we delaying test execution for the next tick of event loop
|
166
|
-
// and letting hooks and component lifecycle methods to execute mount
|
167
|
-
// https://github.com/bahmutov/cypress-react-unit-test/issues/200
|
168
|
-
.wait(0, { log: false })
|
169
|
-
.then(() => {
|
170
|
-
if (options.log !== false) {
|
171
|
-
// Get the display name property via the component constructor
|
172
|
-
// @ts-ignore FIXME
|
173
|
-
const componentName = getDisplayName(jsx);
|
174
|
-
const jsxComponentName = `<${componentName} ... />`;
|
175
|
-
Cypress.log({
|
176
|
-
name: type,
|
177
|
-
type: 'parent',
|
178
|
-
message: [jsxComponentName],
|
179
|
-
// @ts-ignore
|
180
|
-
$el: el.children.item(0),
|
181
|
-
consoleProps: () => {
|
182
|
-
return {
|
183
|
-
// @ts-ignore protect the use of jsx functional components use ReactNode
|
184
|
-
props: jsx === null || jsx === void 0 ? void 0 : jsx.props,
|
185
|
-
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
|
186
|
-
home: 'https://github.com/cypress-io/cypress',
|
187
|
-
};
|
188
|
-
},
|
189
|
-
});
|
190
|
-
}
|
191
|
-
}));
|
192
|
-
// Bluebird types are terrible. I don't think the return type can be carried without this cast
|
193
|
-
});
|
194
|
-
};
|
195
|
-
/**
|
196
|
-
* Create an `unmount` function. Performs all the non-React-version specific
|
197
|
-
* behavior related to unmounting.
|
198
|
-
*
|
199
|
-
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
200
|
-
* or people writing adapters for third-party, custom adapters.
|
201
|
-
*
|
202
|
-
* @param {UnmountArgs} options used during unmounting
|
203
|
-
*/
|
204
|
-
const makeUnmountFn = (options) => {
|
205
|
-
return cy.then(() => {
|
206
|
-
var _a;
|
207
|
-
const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
208
|
-
if (wasUnmounted && options.log) {
|
209
|
-
Cypress.log({
|
210
|
-
name: 'unmount',
|
211
|
-
type: 'parent',
|
212
|
-
message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
|
213
|
-
consoleProps: () => {
|
214
|
-
return {
|
215
|
-
description: 'Unmounts React component',
|
216
|
-
parent: getContainerEl().parentNode,
|
217
|
-
home: 'https://github.com/cypress-io/cypress',
|
218
|
-
};
|
219
|
-
},
|
220
|
-
});
|
221
|
-
}
|
222
|
-
});
|
223
|
-
};
|
224
|
-
// Cleanup before each run
|
225
|
-
// NOTE: we cannot use unmount here because
|
226
|
-
// we are not in the context of a test
|
227
|
-
const preMountCleanup = () => {
|
228
|
-
mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
229
|
-
};
|
230
|
-
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
|
231
|
-
// by creating an explicit function/import that the user can register in their 'component.js' support file,
|
232
|
-
// such as:
|
233
|
-
// import 'cypress/<my-framework>/support'
|
234
|
-
// or
|
235
|
-
// import { registerCT } from 'cypress/<my-framework>'
|
236
|
-
// registerCT()
|
237
|
-
// Note: This would be a breaking change
|
238
|
-
// it is required to unmount component in beforeEach hook in order to provide a clean state inside test
|
239
|
-
// because `mount` can be called after some preparation that can side effect unmount
|
240
|
-
// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
|
112
|
+
let mountCleanup;
|
113
|
+
/**
|
114
|
+
* Create an `mount` function. Performs all the non-React-version specific
|
115
|
+
* behavior related to mounting. The React-version-specific code
|
116
|
+
* is injected. This helps us to maintain a consistent public API
|
117
|
+
* and handle breaking changes in React's rendering API.
|
118
|
+
*
|
119
|
+
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
120
|
+
* or people writing adapters for third-party, custom adapters.
|
121
|
+
*/
|
122
|
+
const makeMountFn = (type, jsx, options = {}, rerenderKey, internalMountOptions) => {
|
123
|
+
if (!internalMountOptions) {
|
124
|
+
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
|
125
|
+
}
|
126
|
+
// @ts-expect-error - this is removed but we want to check if a user is passing it, and error if they are.
|
127
|
+
if (options.alias) {
|
128
|
+
// @ts-expect-error
|
129
|
+
Cypress.utils.throwErrByPath('mount.alias', options.alias);
|
130
|
+
}
|
131
|
+
checkForRemovedStyleOptions(options);
|
132
|
+
mountCleanup = internalMountOptions.cleanup;
|
133
|
+
return cy
|
134
|
+
.then(() => {
|
135
|
+
var _a, _b, _c;
|
136
|
+
const reactDomToUse = internalMountOptions.reactDom;
|
137
|
+
const el = getContainerEl();
|
138
|
+
if (!el) {
|
139
|
+
throw new Error([
|
140
|
+
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
|
141
|
+
].join(' '));
|
142
|
+
}
|
143
|
+
const key = rerenderKey !== null && rerenderKey !== void 0 ? rerenderKey :
|
144
|
+
// @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
|
145
|
+
(((_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();
|
146
|
+
const props = {
|
147
|
+
key,
|
148
|
+
};
|
149
|
+
const reactComponent = React.createElement(options.strict ? React.StrictMode : React.Fragment, props, jsx);
|
150
|
+
// since we always surround the component with a fragment
|
151
|
+
// let's get back the original component
|
152
|
+
const userComponent = reactComponent.props.children;
|
153
|
+
internalMountOptions.render(reactComponent, el, reactDomToUse);
|
154
|
+
return (cy.wrap(userComponent, { log: false })
|
155
|
+
.then(() => {
|
156
|
+
return cy.wrap({
|
157
|
+
component: userComponent,
|
158
|
+
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
|
159
|
+
unmount: () => {
|
160
|
+
// @ts-expect-error - undocumented API
|
161
|
+
Cypress.utils.throwErrByPath('mount.unmount');
|
162
|
+
},
|
163
|
+
}, { log: false });
|
164
|
+
})
|
165
|
+
// by waiting, we delaying test execution for the next tick of event loop
|
166
|
+
// and letting hooks and component lifecycle methods to execute mount
|
167
|
+
// https://github.com/bahmutov/cypress-react-unit-test/issues/200
|
168
|
+
.wait(0, { log: false })
|
169
|
+
.then(() => {
|
170
|
+
if (options.log !== false) {
|
171
|
+
// Get the display name property via the component constructor
|
172
|
+
// @ts-ignore FIXME
|
173
|
+
const componentName = getDisplayName(jsx);
|
174
|
+
const jsxComponentName = `<${componentName} ... />`;
|
175
|
+
Cypress.log({
|
176
|
+
name: type,
|
177
|
+
type: 'parent',
|
178
|
+
message: [jsxComponentName],
|
179
|
+
// @ts-ignore
|
180
|
+
$el: el.children.item(0),
|
181
|
+
consoleProps: () => {
|
182
|
+
return {
|
183
|
+
// @ts-ignore protect the use of jsx functional components use ReactNode
|
184
|
+
props: jsx === null || jsx === void 0 ? void 0 : jsx.props,
|
185
|
+
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
|
186
|
+
home: 'https://github.com/cypress-io/cypress',
|
187
|
+
};
|
188
|
+
},
|
189
|
+
});
|
190
|
+
}
|
191
|
+
}));
|
192
|
+
// Bluebird types are terrible. I don't think the return type can be carried without this cast
|
193
|
+
});
|
194
|
+
};
|
195
|
+
/**
|
196
|
+
* Create an `unmount` function. Performs all the non-React-version specific
|
197
|
+
* behavior related to unmounting.
|
198
|
+
*
|
199
|
+
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
|
200
|
+
* or people writing adapters for third-party, custom adapters.
|
201
|
+
*
|
202
|
+
* @param {UnmountArgs} options used during unmounting
|
203
|
+
*/
|
204
|
+
const makeUnmountFn = (options) => {
|
205
|
+
return cy.then(() => {
|
206
|
+
var _a;
|
207
|
+
const wasUnmounted = mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
208
|
+
if (wasUnmounted && options.log) {
|
209
|
+
Cypress.log({
|
210
|
+
name: 'unmount',
|
211
|
+
type: 'parent',
|
212
|
+
message: [(_a = options.boundComponentMessage) !== null && _a !== void 0 ? _a : 'Unmounted component'],
|
213
|
+
consoleProps: () => {
|
214
|
+
return {
|
215
|
+
description: 'Unmounts React component',
|
216
|
+
parent: getContainerEl().parentNode,
|
217
|
+
home: 'https://github.com/cypress-io/cypress',
|
218
|
+
};
|
219
|
+
},
|
220
|
+
});
|
221
|
+
}
|
222
|
+
});
|
223
|
+
};
|
224
|
+
// Cleanup before each run
|
225
|
+
// NOTE: we cannot use unmount here because
|
226
|
+
// we are not in the context of a test
|
227
|
+
const preMountCleanup = () => {
|
228
|
+
mountCleanup === null || mountCleanup === void 0 ? void 0 : mountCleanup();
|
229
|
+
};
|
230
|
+
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
|
231
|
+
// by creating an explicit function/import that the user can register in their 'component.js' support file,
|
232
|
+
// such as:
|
233
|
+
// import 'cypress/<my-framework>/support'
|
234
|
+
// or
|
235
|
+
// import { registerCT } from 'cypress/<my-framework>'
|
236
|
+
// registerCT()
|
237
|
+
// Note: This would be a breaking change
|
238
|
+
// it is required to unmount component in beforeEach hook in order to provide a clean state inside test
|
239
|
+
// because `mount` can be called after some preparation that can side effect unmount
|
240
|
+
// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
|
241
241
|
setupHooks(preMountCleanup);
|
242
242
|
|
243
243
|
const debug = (
|
@@ -511,64 +511,64 @@ createToken('GTE0', '^\\s*>=\\s*0\\.0\\.0\\s*$');
|
|
511
511
|
createToken('GTE0PRE', '^\\s*>=\\s*0\\.0\\.0-0\\s*$');
|
512
512
|
});
|
513
513
|
|
514
|
-
// @ts-expect-error
|
515
|
-
let root;
|
516
|
-
const cleanup = () => {
|
517
|
-
if (root) {
|
518
|
-
root.unmount();
|
519
|
-
root = null;
|
520
|
-
return true;
|
521
|
-
}
|
522
|
-
return false;
|
523
|
-
};
|
524
|
-
/**
|
525
|
-
* Mounts a React component into the DOM.
|
526
|
-
* @param {import('react').JSX.Element} jsx The React component to mount.
|
527
|
-
* @param {MountOptions} options Options to pass to the mount function.
|
528
|
-
* @param {string} rerenderKey A key to use to force a rerender.
|
529
|
-
*
|
530
|
-
* @example
|
531
|
-
* import { mount } from '@cypress/react'
|
532
|
-
* import { Stepper } from './Stepper'
|
533
|
-
*
|
534
|
-
* it('mounts', () => {
|
535
|
-
* mount(<StepperComponent />)
|
536
|
-
* cy.get('[data-cy=increment]').click()
|
537
|
-
* cy.get('[data-cy=counter]').should('have.text', '1')
|
538
|
-
* }
|
539
|
-
*
|
540
|
-
* @see {@link https://on.cypress.io/mounting-react} for more details.
|
541
|
-
*
|
542
|
-
* @returns {Cypress.Chainable<MountReturn>} The mounted component.
|
543
|
-
*/
|
544
|
-
function mount(jsx, options = {}, rerenderKey) {
|
545
|
-
// Remove last mounted component if cy.mount is called more than once in a test
|
546
|
-
// React by default removes the last component when calling render, but we should remove the root
|
547
|
-
// to wipe away any state
|
548
|
-
cleanup();
|
549
|
-
const internalOptions = {
|
550
|
-
reactDom: ReactDOM,
|
551
|
-
render: (reactComponent, el) => {
|
552
|
-
if (!root) {
|
553
|
-
root = ReactDOM.createRoot(el);
|
554
|
-
}
|
555
|
-
return root.render(reactComponent);
|
556
|
-
},
|
557
|
-
unmount: internalUnmount,
|
558
|
-
cleanup,
|
559
|
-
};
|
560
|
-
return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
|
561
|
-
}
|
562
|
-
function internalUnmount(options = { log: true }) {
|
563
|
-
return makeUnmountFn(options);
|
564
|
-
}
|
565
|
-
/**
|
566
|
-
* Removed as of Cypress 11.0.0.
|
567
|
-
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
568
|
-
*/
|
569
|
-
function unmount(options = { log: true }) {
|
570
|
-
// @ts-expect-error - undocumented API
|
571
|
-
Cypress.utils.throwErrByPath('mount.unmount');
|
514
|
+
// @ts-expect-error
|
515
|
+
let root;
|
516
|
+
const cleanup = () => {
|
517
|
+
if (root) {
|
518
|
+
root.unmount();
|
519
|
+
root = null;
|
520
|
+
return true;
|
521
|
+
}
|
522
|
+
return false;
|
523
|
+
};
|
524
|
+
/**
|
525
|
+
* Mounts a React component into the DOM.
|
526
|
+
* @param {import('react').JSX.Element} jsx The React component to mount.
|
527
|
+
* @param {MountOptions} options Options to pass to the mount function.
|
528
|
+
* @param {string} rerenderKey A key to use to force a rerender.
|
529
|
+
*
|
530
|
+
* @example
|
531
|
+
* import { mount } from '@cypress/react'
|
532
|
+
* import { Stepper } from './Stepper'
|
533
|
+
*
|
534
|
+
* it('mounts', () => {
|
535
|
+
* mount(<StepperComponent />)
|
536
|
+
* cy.get('[data-cy=increment]').click()
|
537
|
+
* cy.get('[data-cy=counter]').should('have.text', '1')
|
538
|
+
* }
|
539
|
+
*
|
540
|
+
* @see {@link https://on.cypress.io/mounting-react} for more details.
|
541
|
+
*
|
542
|
+
* @returns {Cypress.Chainable<MountReturn>} The mounted component.
|
543
|
+
*/
|
544
|
+
function mount(jsx, options = {}, rerenderKey) {
|
545
|
+
// Remove last mounted component if cy.mount is called more than once in a test
|
546
|
+
// React by default removes the last component when calling render, but we should remove the root
|
547
|
+
// to wipe away any state
|
548
|
+
cleanup();
|
549
|
+
const internalOptions = {
|
550
|
+
reactDom: ReactDOM,
|
551
|
+
render: (reactComponent, el) => {
|
552
|
+
if (!root) {
|
553
|
+
root = ReactDOM.createRoot(el);
|
554
|
+
}
|
555
|
+
return root.render(reactComponent);
|
556
|
+
},
|
557
|
+
unmount: internalUnmount,
|
558
|
+
cleanup,
|
559
|
+
};
|
560
|
+
return makeMountFn('mount', jsx, Object.assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
|
561
|
+
}
|
562
|
+
function internalUnmount(options = { log: true }) {
|
563
|
+
return makeUnmountFn(options);
|
564
|
+
}
|
565
|
+
/**
|
566
|
+
* Removed as of Cypress 11.0.0.
|
567
|
+
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
|
568
|
+
*/
|
569
|
+
function unmount(options = { log: true }) {
|
570
|
+
// @ts-expect-error - undocumented API
|
571
|
+
Cypress.utils.throwErrByPath('mount.unmount');
|
572
572
|
}
|
573
573
|
|
574
574
|
export { getContainerEl$1 as getContainerEl, mount, unmount };
|
package/react18/dist/index.d.ts
CHANGED
@@ -15,7 +15,7 @@ interface UnmountArgs {
|
|
15
15
|
log: boolean;
|
16
16
|
boundComponentMessage?: string;
|
17
17
|
}
|
18
|
-
|
18
|
+
type MountOptions = Partial<MountReactComponentOptions>;
|
19
19
|
interface MountReactComponentOptions {
|
20
20
|
ReactDom: typeof react_dom;
|
21
21
|
/**
|