cypress 11.0.0 → 11.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/angular/README.md +2 -77
- package/mount-utils/README.md +2 -1
- package/package.json +3 -3
- package/react/README.md +2 -87
- package/react18/README.md +7 -0
- package/svelte/README.md +1 -69
- package/vue/README.md +2 -72
- package/vue2/README.md +2 -68
package/angular/README.md
CHANGED
|
@@ -1,85 +1,10 @@
|
|
|
1
1
|
# @cypress/angular
|
|
2
2
|
|
|
3
|
-
Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
4
|
-
|
|
5
|
-
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-angular#Configuring-Component-Testing) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be used for advanced use-cases.
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
- Requires Cypress v7.0.0 or later
|
|
10
|
-
- Requires [Node](https://nodejs.org/en/) version 12 or above
|
|
11
|
-
|
|
12
|
-
```sh
|
|
13
|
-
npm install --save-dev @cypress/angular
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Run
|
|
17
|
-
|
|
18
|
-
Open cypress test runner
|
|
19
|
-
```
|
|
20
|
-
npx cypress open --component
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
If you need to run test in CI
|
|
24
|
-
```
|
|
25
|
-
npx cypress run --component
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
|
|
29
|
-
|
|
30
|
-
## API
|
|
31
|
-
|
|
32
|
-
- `mount` is the most important function, allows to mount a given Angular component as a mini web application and interact with it using Cypress commands
|
|
33
|
-
- `MountConfig` Configuration used to configure your test
|
|
34
|
-
- `createOutputSpy` factory function that creates new EventEmitter for your component and spies on it's `emit` method.
|
|
35
|
-
|
|
36
|
-
## Examples
|
|
37
|
-
|
|
38
|
-
```ts
|
|
39
|
-
import { mount } from '@cypress/angular'
|
|
40
|
-
import { HelloWorldComponent } from './hello-world.component'
|
|
41
|
-
|
|
42
|
-
describe('HelloWorldComponent', () => {
|
|
43
|
-
it('works', () => {
|
|
44
|
-
mount(HelloWorldComponent)
|
|
45
|
-
// now use standard Cypress commands
|
|
46
|
-
cy.contains('Hello World!').should('be.visible')
|
|
47
|
-
})
|
|
48
|
-
})
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
```ts
|
|
52
|
-
import { mount } from '@cypress/angular'
|
|
53
|
-
import { HelloWorldComponent } from './hello-world.component'
|
|
54
|
-
|
|
55
|
-
describe('HelloWorldComponent', () => {
|
|
56
|
-
it('works', () => {
|
|
57
|
-
mount('<app-hello-world></app-hello-world>', {
|
|
58
|
-
declarations: [HelloWorldComponent]
|
|
59
|
-
})
|
|
60
|
-
// now use standard Cypress commands
|
|
61
|
-
cy.contains('Hello World!').should('be.visible')
|
|
62
|
-
})
|
|
63
|
-
})
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
Look at the examples in [cypress-component-testing-apps](https://github.com/cypress-io/cypress-component-testing-apps) repo. Here in the `angular` and `angular-standalone` folders are the two example applications showing various testing scenarios.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
## Compatibility
|
|
70
|
-
|
|
71
|
-
| @cypress/angular | cypress |
|
|
72
|
-
| -------------- | ------- |
|
|
73
|
-
| >= v1 | >= v10.5 |
|
|
3
|
+
Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
74
4
|
|
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be done for advanced use-cases.
|
|
75
6
|
## Development
|
|
76
7
|
|
|
77
8
|
Run `yarn build` to compile and sync packages to the `cypress` cli package.
|
|
78
9
|
|
|
79
|
-
## License
|
|
80
|
-
|
|
81
|
-
[](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
|
|
82
|
-
|
|
83
|
-
This project is licensed under the terms of the [MIT license](/LICENSE).
|
|
84
|
-
|
|
85
10
|
## [Changelog](./CHANGELOG.md)
|
package/mount-utils/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> **Note** this package is not meant to be used outside of cypress component testing.
|
|
4
4
|
|
|
5
|
-
This
|
|
5
|
+
This library exports some shared types and utility functions designed to build adapters for components frameworks.
|
|
6
6
|
|
|
7
7
|
It is used in:
|
|
8
8
|
|
|
@@ -22,6 +22,7 @@ All the functionality used to create the first party Mount adapters is available
|
|
|
22
22
|
|
|
23
23
|
- Receive a component as the first argument. This could be class, function etc - depends on the framework.
|
|
24
24
|
- Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework
|
|
25
|
+
- Call `getContainerEl` to access the root DOM element
|
|
25
26
|
|
|
26
27
|
In addition, we recommend that Mount Adapters:
|
|
27
28
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cypress",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"postinstall": "node index.js --exec install",
|
|
@@ -118,8 +118,8 @@
|
|
|
118
118
|
},
|
|
119
119
|
"buildInfo": {
|
|
120
120
|
"commitBranch": "develop",
|
|
121
|
-
"commitSha": "
|
|
122
|
-
"commitDate": "2022-11-
|
|
121
|
+
"commitSha": "e9e8cadda4fb14d601079018b57425b221a005d9",
|
|
122
|
+
"commitDate": "2022-11-10T02:43:03.000Z",
|
|
123
123
|
"stable": true
|
|
124
124
|
},
|
|
125
125
|
"description": "Cypress is a next generation front end testing tool built for the modern web",
|
package/react/README.md
CHANGED
|
@@ -1,87 +1,8 @@
|
|
|
1
1
|
# @cypress/react
|
|
2
2
|
|
|
3
|
-
Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
4
|
-
|
|
5
|
-
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-react#Configuring-Component-Testing) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be used for advanced use-cases.
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
- Requires Cypress v7.0.0 or later
|
|
10
|
-
- Requires [Node](https://nodejs.org/en/) version 12 or above
|
|
11
|
-
|
|
12
|
-
```sh
|
|
13
|
-
npm install --save-dev @cypress/react
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Run
|
|
17
|
-
|
|
18
|
-
Open cypress test runner
|
|
19
|
-
```
|
|
20
|
-
npx cypress open --component
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
If you need to run test in CI
|
|
24
|
-
```
|
|
25
|
-
npx cypress run --component
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
|
|
29
|
-
|
|
30
|
-
## API
|
|
31
|
-
|
|
32
|
-
- `mount` is the most important function, allows to mount a given React component as a mini web application and interact with it using Cypress commands
|
|
33
|
-
- `createMount` factory function that creates new `mount` function with default options
|
|
34
|
-
|
|
35
|
-
## Examples
|
|
36
|
-
|
|
37
|
-
```js
|
|
38
|
-
import React from 'react'
|
|
39
|
-
import { mount } from '@cypress/react'
|
|
40
|
-
import { HelloWorld } from './hello-world.jsx'
|
|
41
|
-
describe('HelloWorld component', () => {
|
|
42
|
-
it('works', () => {
|
|
43
|
-
mount(<HelloWorld />)
|
|
44
|
-
// now use standard Cypress commands
|
|
45
|
-
cy.contains('Hello World!').should('be.visible')
|
|
46
|
-
})
|
|
47
|
-
})
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
|
|
51
|
-
|
|
52
|
-
## Options
|
|
53
|
-
|
|
54
|
-
In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
|
|
55
|
-
|
|
56
|
-
```js
|
|
57
|
-
// src/Footer.spec.js
|
|
58
|
-
import './styles/main.css'
|
|
59
|
-
import Footer from './Footer'
|
|
60
|
-
it('looks right', () => {
|
|
61
|
-
// styles are applied
|
|
62
|
-
mount(<Footer />)
|
|
63
|
-
})
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
See [docs/styles.md](./docs/styles.md) for full list of options.
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
You may also specify the `ReactDOM` package to use. This can be useful in complex monorepo setups that have different versions of React and React DOM installed. If you see an error relating to [mismatching versions of React or React DOM](https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom), this may be the solution. You can do this using the `ReactDom` option:
|
|
70
|
-
|
|
71
|
-
```jsx
|
|
72
|
-
// if you have multiple versions of ReactDom in your monorepo
|
|
73
|
-
import ReactDom from 'react-dom'
|
|
74
|
-
|
|
75
|
-
mount(<Todo todo={todo} />, { reactDom: ReactDom })
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## Compatibility
|
|
79
|
-
|
|
80
|
-
| @cypress/react | cypress |
|
|
81
|
-
| -------------- | ------- |
|
|
82
|
-
| <= v5 | <= v9 |
|
|
83
|
-
| >= v6 | >= v10 |
|
|
3
|
+
Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
84
4
|
|
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be done for advanced use-cases.
|
|
85
6
|
## Development
|
|
86
7
|
|
|
87
8
|
Run `yarn build` to compile and sync packages to the `cypress` cli package.
|
|
@@ -90,10 +11,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
|
|
|
90
11
|
|
|
91
12
|
Run `yarn test` to execute headless Cypress tests.
|
|
92
13
|
|
|
93
|
-
## License
|
|
94
|
-
|
|
95
|
-
[](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
|
|
96
|
-
|
|
97
|
-
This project is licensed under the terms of the [MIT license](/LICENSE).
|
|
98
|
-
|
|
99
14
|
## [Changelog](./CHANGELOG.md)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
# @cypress/react18
|
|
2
|
+
|
|
3
|
+
Mount React 18 components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
4
|
+
|
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react18` should only be done for advanced use-cases.
|
|
6
|
+
|
|
7
|
+
## [Changelog](./CHANGELOG.md)
|
package/svelte/README.md
CHANGED
|
@@ -2,69 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
|
|
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/
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
- Requires Svelte >= 3
|
|
10
|
-
- Requires Cypress v10.7.0 or later
|
|
11
|
-
- Requires [Node](https://nodejs.org/en/) version 12 or above
|
|
12
|
-
|
|
13
|
-
```sh
|
|
14
|
-
npm install --save-dev @cypress/svelte
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Run
|
|
18
|
-
|
|
19
|
-
Open cypress test runner
|
|
20
|
-
```
|
|
21
|
-
npx cypress open --component
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
If you need to run test in CI
|
|
25
|
-
```
|
|
26
|
-
npx cypress run --component
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
|
|
30
|
-
|
|
31
|
-
## Example
|
|
32
|
-
|
|
33
|
-
```js
|
|
34
|
-
import { mount } from '@cypress/svelte'
|
|
35
|
-
import HelloWorld from './HelloWorld.svelte'
|
|
36
|
-
|
|
37
|
-
describe('HelloWorld component', () => {
|
|
38
|
-
it('works', () => {
|
|
39
|
-
mount(HelloWorld)
|
|
40
|
-
// now use standard Cypress commands
|
|
41
|
-
cy.contains('Hello World!').should('be.visible')
|
|
42
|
-
})
|
|
43
|
-
})
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Options
|
|
47
|
-
|
|
48
|
-
In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
|
|
49
|
-
|
|
50
|
-
```js
|
|
51
|
-
// src/HelloWorld.svelte
|
|
52
|
-
import './styles/main.css'
|
|
53
|
-
import HelloWorld from './HelloWorld.svelte'
|
|
54
|
-
|
|
55
|
-
it('looks right', () => {
|
|
56
|
-
// styles are applied
|
|
57
|
-
mount(HelloWorld)
|
|
58
|
-
})
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
> Note: Global styles can be imported in your component support file, allowing the styles to apply to all mounted components.
|
|
62
|
-
|
|
63
|
-
## Compatibility
|
|
64
|
-
|
|
65
|
-
| @cypress/svelte | cypress |
|
|
66
|
-
| -------------- | ------- |
|
|
67
|
-
| >= v1 | >= v10 |
|
|
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.
|
|
68
6
|
|
|
69
7
|
## Development
|
|
70
8
|
|
|
@@ -74,10 +12,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
|
|
|
74
12
|
|
|
75
13
|
Run `yarn test` to execute headless Cypress tests.
|
|
76
14
|
|
|
77
|
-
## License
|
|
78
|
-
|
|
79
|
-
[](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
|
|
80
|
-
|
|
81
|
-
This project is licensed under the terms of the [MIT license](/LICENSE).
|
|
82
|
-
|
|
83
15
|
## [Changelog](./CHANGELOG.md)
|
package/vue/README.md
CHANGED
|
@@ -1,65 +1,8 @@
|
|
|
1
1
|
# @cypress/vue
|
|
2
2
|
|
|
3
|
-
Mount Vue components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
4
|
-
|
|
5
|
-
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-vue#Configuring-Component-Testing) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be used for advanced use-cases.
|
|
6
|
-
|
|
7
|
-
### How is this different from @cypress/vue2?
|
|
8
|
-
Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue2](https://github.com/cypress-io/cypress/tree/develop/npm/vue2) if you're still using vue@2, and this package if you're on vue@3.
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
- Requires Cypress v7.0.0 or later
|
|
13
|
-
- Requires [Node](https://nodejs.org/en/) version 12 or above
|
|
14
|
-
- Requires Vue 3.x. If you are using Vue 2.x, you want [@cypress/vue2](https://github.com/cypress-io/cypress/tree/develop/npm/vue2) instead.
|
|
15
|
-
|
|
16
|
-
```sh
|
|
17
|
-
npm i -D @cypress/vue
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Usage and Examples
|
|
21
|
-
|
|
22
|
-
```js
|
|
23
|
-
// components/HelloWorld.spec.js
|
|
24
|
-
import { mount } from '@cypress/vue'
|
|
25
|
-
import { HelloWorld } from './HelloWorld.vue'
|
|
26
|
-
describe('HelloWorld component', () => {
|
|
27
|
-
it('works', () => {
|
|
28
|
-
mount(HelloWorld)
|
|
29
|
-
// now use standard Cypress commands
|
|
30
|
-
cy.contains('Hello World!').should('be.visible')
|
|
31
|
-
})
|
|
32
|
-
})
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
|
|
36
|
-
|
|
37
|
-
### Styles
|
|
38
|
-
|
|
39
|
-
One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.
|
|
40
|
-
|
|
41
|
-
```js
|
|
42
|
-
import Todo from './Todo.vue'
|
|
43
|
-
import '../styles/main.css'
|
|
44
|
-
const todo = {
|
|
45
|
-
id: '123',
|
|
46
|
-
title: 'Write more tests',
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
mount(Todo, { props: { todo } })
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Global Vue Options
|
|
53
|
-
|
|
54
|
-
You can pass extensions (global components, mixins, modules to use)
|
|
55
|
-
when mounting Vue component. Use `{ extensions: { ... }}` object inside
|
|
56
|
-
the `options`.
|
|
57
|
-
|
|
58
|
-
- `components` - object of 'id' and components to register globally, see [Components](npm/vue/cypress/component/basic/components) example
|
|
59
|
-
- `use` (alias `plugins`) - list of plugins, see [Plugins](npm/vue/cypress/component/basic/plugins)
|
|
60
|
-
- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](npm/vue/cypress/component/basic/mixins) example
|
|
61
|
-
- `filters` - hash of global filters, see [Filters](npm/vue/cypress/component/basic/filters) example
|
|
3
|
+
Mount Vue 3 components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
62
4
|
|
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/vue/overview) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be done for advanced use-cases.
|
|
63
6
|
## Development
|
|
64
7
|
|
|
65
8
|
Run `yarn build` to compile and sync packages to the `cypress` cli package.
|
|
@@ -68,17 +11,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
|
|
|
68
11
|
|
|
69
12
|
Run `yarn test` to execute headless Cypress tests.
|
|
70
13
|
|
|
71
|
-
## Compatibility
|
|
72
|
-
|
|
73
|
-
| @cypress/vue | cypress |
|
|
74
|
-
| ------------ | ------- |
|
|
75
|
-
| <= v3 | <= v9 |
|
|
76
|
-
| >= v4 | >= v10 |
|
|
77
|
-
|
|
78
|
-
## License
|
|
79
|
-
|
|
80
|
-
[](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
|
|
81
|
-
|
|
82
|
-
This project is licensed under the terms of the [MIT license](/LICENSE).
|
|
83
|
-
|
|
84
14
|
## [Changelog](./CHANGELOG.md)
|
package/vue2/README.md
CHANGED
|
@@ -1,73 +1,7 @@
|
|
|
1
1
|
# @cypress/vue2
|
|
2
2
|
|
|
3
|
-
Mount Vue components in the open source [Cypress.io](https://www.cypress.io/) test runner
|
|
3
|
+
Mount Vue 2 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 [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/
|
|
6
|
-
|
|
7
|
-
### How is this different from @cypress/vue?
|
|
8
|
-
Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue) if you're up to date, and this package if you're still using vue@2.
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
- Requires Cypress v7.0.0 or later
|
|
13
|
-
- Requires [Node](https://nodejs.org/en/) version 12 or above
|
|
14
|
-
- Requires Vue 2.x. If you are using Vue 3.0.0 or later, you want [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue) instead.
|
|
15
|
-
|
|
16
|
-
```sh
|
|
17
|
-
npm i -D @cypress/vue2
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
## Usage and Examples
|
|
21
|
-
|
|
22
|
-
```js
|
|
23
|
-
// components/HelloWorld.spec.js
|
|
24
|
-
import { mount } from '@cypress/vue2'
|
|
25
|
-
import { HelloWorld } from './HelloWorld.vue'
|
|
26
|
-
describe('HelloWorld component', () => {
|
|
27
|
-
it('works', () => {
|
|
28
|
-
mount(HelloWorld)
|
|
29
|
-
// now use standard Cypress commands
|
|
30
|
-
cy.contains('Hello World!').should('be.visible')
|
|
31
|
-
})
|
|
32
|
-
})
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Options
|
|
36
|
-
|
|
37
|
-
One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
import Todo from './Todo.vue'
|
|
41
|
-
import '../styles/main.css'
|
|
42
|
-
const todo = {
|
|
43
|
-
id: '123',
|
|
44
|
-
title: 'Write more tests',
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
mount(Todo, { propsData: { todo } })
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Global Vue Options
|
|
51
|
-
|
|
52
|
-
You can pass extensions (global components, mixins, modules to use)
|
|
53
|
-
when mounting Vue component. Use `{ extensions: { ... }}` object inside
|
|
54
|
-
the `options`.
|
|
55
|
-
|
|
56
|
-
- `components` - object of 'id' and components to register globally, see [Components](cypress/component/basic/components) example
|
|
57
|
-
- `use` (alias `plugins`) - list of plugins, see [Plugins](cypress/component/basic/plugins)
|
|
58
|
-
- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](cypress/component/basic/mixins) example
|
|
59
|
-
- `filters` - hash of global filters, see [Filters](cypress/component/basic/filters) example
|
|
60
|
-
|
|
61
|
-
## Compatibility
|
|
62
|
-
|
|
63
|
-
| @cypress/vue2 | cypress |
|
|
64
|
-
| ------------- | ------- |
|
|
65
|
-
| >= v1 | >= v10 |
|
|
66
|
-
|
|
67
|
-
## License
|
|
68
|
-
|
|
69
|
-
[](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
|
|
70
|
-
|
|
71
|
-
This project is licensed under the terms of the [MIT license](/LICENSE).
|
|
5
|
+
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/vue/overview) for mounting Vue components. Installing and importing `mount` from `@cypress/vue2` should only be done for advanced use-cases.
|
|
72
6
|
|
|
73
7
|
## [Changelog](./CHANGELOG.md)
|