Testing

Vue and Vite has its own ecosystem for unit and component testing.

And one of recommended options is Cypress that provide both - Component testing and End to end testing.

Getting started

When the project was set up with these options, Vitest and Cypress both are enabled out-of-the-box.

✔ Add Vitest for Unit testing? … Yes ✔ Add an End-to-End Testing Solution? … Cypress

Component tests

1. Create global configuration to always include vuetify plugin for component tests.

• Add Vuetify plugin and related imports to @tsconfig.json

{
  // ...
  "include": [
    // ...
    "./src/plugins/vuetify.ts",
    "./src/plugins/i18n.ts",
    "./src/themes/*.ts"
  ]
  // ...
}

• Modify imports in @/plugins/vuetify to avoid type check errors

// ...
import light from '../themes/light'
import dark from '../themes/dark'
import defaults from '../themes/defaults'
import icons from '../themes/icons'
// ...

• modify Vitest configuration

@./vitest.config.setup.ts

import { beforeEach } from 'vitest'
import { config } from '@vue/test-utils'
import vuetify from './src/plugins/vuetify' 
import i18n from './src/plugins/i18n'

beforeEach(() => {
  config.global.plugins = [vuetify, i18n]
})

@./vitest.config.ts

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'

export default defineConfig(async (configEnv) => {

  const resolvedViteConfig = typeof viteConfig === 'function' 
    ? await viteConfig(configEnv) 
    : viteConfig;

  return mergeConfig(
    resolvedViteConfig,
    {
      test: {
        server: {
          deps: {
            inline: ['vuetify'],
          },
        },
        environment: 'jsdom',
        exclude: [...configDefaults.exclude, 'e2e/**'],
        root: fileURLToPath(new URL('./', import.meta.url)),
        setupFiles: './vitest.config.setup.ts',
      }
    }
  )
})

Now component tests can be created without adding vuetify for each component individually

import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import VBsbTable from '@/components/VBsbTable.vue'
//import vuetify from '../../plugins/vuetify'

const factory = (props = {}) => {
  return mount(VBsbTable, {
    //    global: {
    //      plugins: [vuetify]
    //    },
  })
}
//...

2. Run tests

npm run test:unit

e2e testing - Cypress

1. Rename ./cypress/e2e/example.cy.ts to ./cypress/e2e/App.cy.ts and modify to test, if App opens and navigation works.

describe('Open app', () => {
  it('visits the app root url', () => {
    cy.visit('http://localhost:4173/')
    cy.contains('h1', 'Home')
  })
})

describe('Navigate to About', () => {
  it('visits the about page', () => {
    cy.visit('http://localhost:4173/about')
    cy.contains('h1', 'About')
  })
})

2. Run Cypress and select e2e testing

npm run dev --port 5173
npx cypress open

or, alternatively, tests can be run from command line

npm run test:e2e

3. Recording (optional)

Notable feature is option to save files as video by adding to /cypress.config.ts (when e2e tests run from command line).

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
    baseUrl: 'http://localhost:4173',
    video: true,
    videosFolder: "./cypress/videos",
  }
})