Cypress App

Vue Component Testing

info

What you'll learn

• How to set up component tests in Vue
• How to configure Cypress for Vue projects

Framework Support

Cypress Component Testing supports Vue 3+ with the following frameworks:

• Vue with Vite
• Vue with Webpack

Tutorial

Visit the Getting Started Guide for a step-by-step tutorial on adding component testing to any project and how to write your first tests.

Installation

To get up and running with Cypress Component Testing in Vue, install Cypress into your project:

npm

npm install cypress --save-dev

yarn

yarn add cypress --dev

pnpm

pnpm add --save-dev cypress

Open Cypress:

npm

npx cypress open

yarn

yarn cypress open

pnpm

pnpm cypress open

Choose Component Testing

The Cypress Launchpad will guide you through configuring your project.

info

For a step-by-step guide on how to create a component test, refer to the Getting Started guide.

For usage and examples, visit the Vue Examples guide.

Framework Configuration

Cypress Component Testing works out of the box with Vite, and a custom Webpack config. Cypress will automatically detect one of these frameworks during setup and configure them properly. The examples below are for reference purposes.

Vue with Vite

Cypress Component Testing works with Vue apps that use Vite 4+ as the bundler.

Vite Configuration

cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
    },
  },
})

cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
    },
  },
})

Vue Vite Sample Apps

• Vue 3 Vite with TypeScript

Vue with Webpack

Cypress Component Testing works with Vue apps that use Webpack 4+ as the bundler.

Webpack Configuration

cypress.config.js

const { defineConfig } = require('cypress')
const webpackConfig = require('./webpack.config')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
      webpackConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
})

cypress.config.ts

import { defineConfig } from 'cypress'
import webpackConfig from './webpack.config'

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
      webpackConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
})

If you don't provide one, Cypress will try to infer your webpack config. If Cypress cannot or you want to make modifications to your config, you can pass it in manually via the webpackConfig option.

Vue Webpack Sample Apps

• Vue 3 Webpack 5 with TypeScript