Eric-Durr / cypress-vuetify-component-testing

A sample app to demonstrate Cypress component testing with Vue2/Vuetify2

Cypress Component Testing with Vue and Vuetify

Cypress is currently (2021-04-22) developing a component testing library. This is a sample project that shows how to configure Cypress component testing to work with Vue (v2.x) and Vuetify (v2.x).

To Install This App Locally and Run Cypress

git clone https://github.com/morphatic/cypress-vuetify-component-testing.git
cd cypress-vuetify-component-testing
npm install
npx cypress open-ct

This should launch a Cypress browser from which you can select the component you'd like to test (there's only one). It should look something like this:

Steps to Setup Cypress Component Testing in a Vuetify project

This method uses the @vue/cli. First, create a new Vue app, add Vuetify, then install the necessary additional plugins:

vue create my-app
cd my-app
vue add vuetify
npm i -D cypress @cypress/vue @cypress/webpack-dev-server eslint-plugin-cypress

Then update/create the necessary config files:

// ./cypress.json
{
  "component": {
    "componentFolder": "tests",
    "testFiles": "**/*.spec.js"
  }
}

// ./cypress/plugins/index.js
module.exports = (on, config) => {
  if (config.testingType === 'component') {
    const { startDevServer } = require('@cypress/webpack-dev-server')
    const webpackConfig = require('@vue/cli-service/webpack.config.js')
    on('dev-server:start', options => startDevServer({ options, webpackConfig }))
  }
  return config
}

// ./.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    'cypress/globals': true, // <== ADD THIS
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: [
    'cypress', // <== AND THIS
  ],
  ...
}

// ./tests/component/App.vue
<template>
  <v-app>
    <v-container>
      <slot />
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

// ./tests/component/test-utils.js
import { mount } from '@cypress/vue'
import vuetify from '@/plugins/vuetify'
import App from './App'

export const vmount = (component, options) => mount(App, { slots: { default: component }, vuetify, ...options })

This configuration expects tests to be saved in the ./tests/component/ directory rather than alongside the component definitions in the ./src/ directory. See ./tests/component/MyButton.spec.js for an example.

Additional Thoughts

Check out my blog post for more thoughts, details, and the overall experience of using this so far.

Credits

Inpspiration for getting this app working came from:

• Getting Started with Cypress Component Testing (Vue 2/3), by Lacklan Miller
• JessicaSachs/cypress-vuetify-component-test