Note: This package is bundled with the cypress package and should not need to be installed separately. See the Vue Component Testing Docs for mounting Vue components. Installing and importing mount from @cypress/vue should only be used for advanced use-cases.

How is this different from @cypress/vue2?

Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use @cypress/vue2 if you're still using vue@2, and this package if you're on vue@3.

Installation

Requires Cypress v7.0.0 or later
Requires Node version 12 or above
Requires Vue 3.x. If you are using Vue 2.x, you want @cypress/vue2 instead.

npm i -D @cypress/vue

Usage and Examples

// components/HelloWorld.spec.js
import { mount } from '@cypress/vue'
import { HelloWorld } from './HelloWorld.vue'
describe('HelloWorld component', () => {
  it('works', () => {
    mount(HelloWorld)
    // now use standard Cypress commands
    cy.contains('Hello World!').should('be.visible')
  })
})

Look at the examples in cypress/component folder. Here is the list of examples showing various testing scenarios.

Options

You can pass additional styles, css files and external stylesheets to load, see docs/styles.md for full list.

import Todo from './Todo.vue'
const todo = {
  id: '123',
  title: 'Write more tests',
}

mount(Todo, {
  propsData: { todo },
  stylesheets: [
    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css',
  ],
})

Global Vue Options

You can pass extensions (global components, mixins, modules to use) when mounting Vue component. Use { extensions: { ... }} object inside the options.

components - object of 'id' and components to register globally, see Components example
use (alias plugins) - list of plugins, see Plugins
mixin (alias mixins) - list of global mixins, see Mixins example
filters - hash of global filters, see Filters example

Development

Run yarn build to compile and sync packages to the cypress cli package.

Run yarn cy:open to open Cypress component testing against real-world examples.

Run yarn test to execute headless Cypress tests.

Compatibility

@cypress/vue	cypress
<= v3	<= v9
>= v4	>= v10

License

This project is licensed under the terms of the MIT license.

README.md

@cypress/vue