Vue.js: Unit Testing & E2E

// ❌ The broken version: no tests, so Alice doesn't dare to refactor
// One line changed in ProductCard.vue, and the entire home page goes blank
// Nobody notices until users complain the next day
// The team: "Don't touch this component, we don't know what it will break"

// tests/unit/ProductCard.test.js
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ProductCard from '@/components/ProductCard.vue'

describe('ProductCard', () => {
  it('renders product name and price', () => {
    const product = { id: 1, name: 'iPhone', price: 999 }
    const wrapper = mount(ProductCard, { props: { product } })
    
    expect(wrapper.text()).toContain('iPhone')
    expect(wrapper.text()).toContain('$999')
  })
  
  it('emits add-to-cart event', async () => {
    const wrapper = mount(ProductCard, { 
      props: { product: { id: 1, name: 'iPhone', price: 999 } } 
    })
    
    await wrapper.find('button').trigger('click')
    
    expect(wrapper.emitted('add-to-cart')).toBeTruthy()
    expect(wrapper.emitted('add-to-cart')[0]).toEqual([1])
  })
})

$ npx vitest run
✓ ProductCard > renders product name and price
✓ ProductCard > emits add-to-cart event
2 passed

npm install -D vitest @vue/test-utils @vitest/coverage-v8 jsdom

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  
  test: {
    // Test environment
    environment: 'jsdom',  // or 'happy-dom' / 'node'
    
    // Files to match
    include: ['tests/**/*.test.ts', 'src/**/*.test.ts'],
    
    // Coverage
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'json'],
      exclude: ['node_modules/', 'tests/']
    },
    
    // Global setup
    setupFiles: ['./tests/setup.ts']
  },
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'

// 1. describe: a test suite
describe('Calculator', () => { })

// 2. it: a single test
it('adds 1 + 1 to equal 2', () => { })

// 3. expect: assertions
expect(1 + 1).toBe(2)
expect(arr).toContain('apple')
expect(obj).toMatchObject({ name: 'Alice' })

// 4. vi: mock / spy
vi.fn()                  // mock function
vi.mock('./api')         // mock a module
vi.spyOn(obj, 'method')  // spy on a method

import { mount, shallowMount, RouterLinkStub } from '@vue/test-utils'

// 1. mount: full mount (child components are mounted too)
const wrapper = mount(Component, { props: { ... } })

// 2. shallowMount: shallow mount (child components are not mounted, they are stubbed)
const wrapper = shallowMount(Component, { props: { ... } })

// 3. Finding elements
wrapper.find('button')              // first match
wrapper.findAll('li')              // all matches
wrapper.findComponent(MyComponent)  // find a child component
wrapper.get('#submit')             // must exist (throws if not found)

// 4. Triggering events
await wrapper.find('button').trigger('click')
await wrapper.find('input').setValue('hello')

// 5. Assertions
expect(wrapper.text()).toContain('Hello')
expect(wrapper.find('h1').text()).toBe('Title')
expect(wrapper.emitted('add-to-cart')).toBeTruthy()

// 1. props test
it('renders props correctly', () => {
  const wrapper = mount(MyComponent, { props: { title: 'Hello' } })
  expect(wrapper.text()).toContain('Hello')
})

// 2. emit test
it('emits event on click', async () => {
  const wrapper = mount(MyComponent)
  await wrapper.find('button').trigger('click')
  expect(wrapper.emitted('submit')).toBeTruthy()
})

// 3. slot test
it('renders default slot', () => {
  const wrapper = mount(MyComponent, {
    slots: { default: '<p>Slot content</p>' }
  })
  expect(wrapper.html()).toContain('Slot content')
})

// 4. async test
// Note: flushPromises must be defined yourself or imported from a testing utility library
// const flushPromises = () => new Promise(resolve => setTimeout(resolve, 0))
it('loads data on mount', async () => {
  const wrapper = mount(MyComponent)
  await flushPromises()  // wait for the async work to finish
  expect(wrapper.text()).toContain('Loaded')
})

// 5. provide/inject test
it('uses provided value', () => {
  const wrapper = mount(MyComponent, {
    provide: { theme: 'dark' }
  })
  expect(wrapper.find('.dark').exists()).toBe(true)
})

// 1. Text contains
expect(wrapper.text()).toContain('Hello')

// 2. Class exists
expect(wrapper.find('.active').exists()).toBe(true)

// 3. Element exists
expect(wrapper.find('button').exists()).toBe(true)

// 4. Event emitted
expect(wrapper.emitted('click')).toBeTruthy()
expect(wrapper.emitted('click')[0]).toEqual([arg1, arg2])

// 5. Async operation finished
await wrapper.vm.$nextTick()
await flushPromises()

First render: the page shows the "Hits: 3" button, the hint "Last value received by the parent: (not clicked yet)", and the list shows "running…".
After the script clicks the sandbox button once, the list becomes ✓ props drive the initial render, ✓ a click increments and re-renders, ✓ emit passes the new value to the parent, ✓ 3 passed.
The console prints the same 4 lines; clicking the visible Hits button yourself keeps incrementing it and updates the parent value to 4, 5, 6…

npm install -D @playwright/test
npx playwright install

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry'
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } }
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI
  }
})

// 1. Login flow
import { test, expect } from '@playwright/test'

test('user can login', async ({ page }) => {
  await page.goto('/login')
  await page.fill('input[name="username"]', 'alice@example.com')
  await page.fill('input[name="password"]', 'password123')
  await page.click('button[type="submit"]')
  
  await expect(page).toHaveURL('/dashboard')
  await expect(page.locator('h1')).toContainText('Welcome, Alice')
})

// 2. Add to cart
test('add product to cart', async ({ page }) => {
  await page.goto('/products/1')
  await page.click('button:has-text("Add to Cart")')
  
  await expect(page.locator('.cart-count')).toHaveText('1')
})

// 3. Form submission
test('submit form with validation', async ({ page }) => {
  await page.goto('/contact')
  await page.fill('input[name="email"]', 'invalid-email')
  await page.click('button[type="submit"]')
  
  await expect(page.locator('.error')).toBeVisible()
})

// 4. Route navigation
test('navigate to products page', async ({ page }) => {
  await page.goto('/')
  await page.click('a:has-text("Products")')
  
  await expect(page).toHaveURL('/products')
})

// 5. Async loading
test('loads data after navigation', async ({ page }) => {
  await page.goto('/dashboard')
  
  // Wait for the data to load
  await page.waitForSelector('.chart-loaded')
  await expect(page.locator('.chart-loaded')).toBeVisible()
})

# Run all tests
npx playwright test

# Run a specific file
npx playwright test tests/e2e/login.spec.ts

# Debug mode (opens a browser)
npx playwright test --debug

# UI mode (visual)
npx playwright test --ui

First render: the status line reads "Logged out", both "Add to cart" and "Checkout" are greyed out, and the list shows "running…".
The script runs 4 steps automatically (login, add 2 items, checkout), so the list shows 4 ✓ lines plus "✓ E2E flow passed: 4 / 4 steps", and the console prints the same 5 lines.
Afterwards you can keep clicking "Add to cart" (login first) by hand: the cart and the checkout button state stay in sync.

// Unit tests: Vitest + @vue/test-utils
// 1. props
it('renders props', () => { /* ... */ })

// 2. emit
it('emits event', async () => { /* ... */ })

// 3. slot
it('renders slot', () => { /* ... */ })

// 4. async
it('loads data', async () => { /* ... */ })

// 5. provide
it('uses provide', () => { /* ... */ })

// The 5 assertion techniques
// 1. Text
expect(wrapper.text()).toContain('Hello')

// 2. Class
expect(wrapper.find('.active').exists()).toBe(true)

// 3. Element
expect(wrapper.find('button').exists()).toBe(true)

// 4. Event
expect(wrapper.emitted('click')).toBeTruthy()

// 5. Async
await wrapper.vm.$nextTick()

// E2E tests: Playwright (5 scenarios)
// 1. Login
test('login', async ({ page }) => { /* ... */ })

// 2. Cart
test('add to cart', async ({ page }) => { /* ... */ })

// 3. Form
test('form submit', async ({ page }) => { /* ... */ })

// 4. Routing
test('navigate', async ({ page }) => { /* ... */ })

// 5. Async
test('async load', async ({ page }) => { /* ... */ })

Once the placeholders are filled in, Vitest reports all ten unit tests as passed, and Playwright reports the five E2E scenarios as passed for each configured browser:

 ✓ tests/unit/component.test.js (5)
   ✓ renders props
   ✓ emits event
   ✓ renders slot
   ✓ loads data
   ✓ uses provide
 ✓ tests/unit/assertions.test.js (5)

 Test Files  2 passed (2)
      Tests  10 passed (10)
   Duration  ~1.2s

Running 5 tests using 3 workers
 ✓ 5 [chromium] › flows.spec.ts › login
 ✓ 5 [chromium] › flows.spec.ts › add to cart
 ✓ 5 [chromium] › flows.spec.ts › form submit
 ✓ 5 [chromium] › flows.spec.ts › navigate
 ✓ 5 [chromium] › flows.spec.ts › async load
 5 passed

The block renders as a five-row troubleshooting table that you scan top to bottom when a test misbehaves:

Error                              Symptom                  Solution
---------------------------------  -----------------------  ----------------------------
Test cannot find the component     Import error             Check the path alias
Async test does not wait           Always fails             Use await + flushPromises
Triggering an event has no effect  Listener never fires     await after trigger
E2E times out                      Element not found        waitForSelector
Low coverage                       No tests written         Enforce a coverage threshold

The block renders as a five-row comparison table sorted from fastest to slowest:

Tool               Speed       Best for
-----------------  ----------  ------------------
Vitest             ⭐⭐⭐⭐⭐  Unit testing
Vue Test Utils     ⭐⭐⭐⭐⭐  Component testing
Playwright         ⭐⭐⭐⭐    E2E testing
Cypress            ⭐⭐⭐      E2E (slow)
Testing Library    ⭐⭐⭐⭐    Component testing