Skip to content

Latest commit

 

History

History
 
 

vue

README.md

@cypress/vue

Mount Vue components in the open source Cypress.io test runner v7.0.0+

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

license

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

Changelog