Skip to content

Latest commit

 

History

History
98 lines (75 loc) · 3.53 KB

README.md

File metadata and controls

98 lines (75 loc) · 3.53 KB
Raw

@cypress/vue2

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/vue?

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

Installation

  • Requires Cypress v7.0.0 or later
  • Requires Node version 12 or above
  • Requires Vue 2.x. If you are using Vue 3.0.0 or later, you want @cypress/vue instead.
npm i -D @cypress/vue2

Usage and Examples

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

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 docs here.
  • use (alias plugins) - list of plugins. See docs here.
  • mixin (alias mixins) - list of global mixins. See docs here.
  • filters - hash of global filters. See docs here.
  • directives - global directives, see directives docs here and here.
import Todo from './Todo.vue'
import MyMixin1 from '../mixins/MyMixin1'
import MyMixin2 from '../mixins/MyMixin2'
import MyPlugin from '../plugins/MyPlugin'
import MyGlobalComponent1 from '../global/MyGlobalComponent1.vue'
import MyGlobalComponent2 from '../global/MyGlobalComponent2.vue'
import MyDirective from '../directives/MyDirective'

mount(Todo, {
  extensions: {
    mixins: [MyMixin1, MyMixin2],
    plugins: [MyPlugin],
    // or use: [MyPlugin]
    components: { MyGlobalComponent1, MyGlobalComponent2 },
    directives: { MyDirective },
  }
})

Compatibility

@cypress/vue2 cypress
>= v1 >= v10

License

license

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

Changelog