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).
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:
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.
Check out my blog post for more thoughts, details, and the overall experience of using this so far.
Inpspiration for getting this app working came from: