Testing in Vue.js

npm install -D vitest @vue/test-utils @testing-library/vue jsdom

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',   // Simulate browser DOM
    globals: true,           // Auto-import describe/it/expect
    setupFiles: './src/test/setup.js'
  }
})

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
  }
}

// src/components/Counter.vue
// <script setup>
// const count = ref(0)
// </script>
// <template>
//   <button @click="count++" data-testid="increment-btn">Count: {{ count }}</button>
// </template>

// tests/Counter.spec.js
import { describe, it, expect } from &#039;vitest&#039;
import { mount } from &#039;@vue/test-utils&#039;
import Counter from &#039;@/components/Counter.vue&#039;

describe(&#039;Counter Component&#039;, () => {
  it(&#039;renders initial count of 0&#039;, () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toContain(&#039;Count: 0&#039;)
  })

  it(&#039;increments count when button is clicked&#039;, async () => {
    const wrapper = mount(Counter)
    const button = wrapper.find(&#039;[data-testid="increment-btn"]&#039;)
    await button.trigger(&#039;click&#039;)
    expect(wrapper.text()).toContain(&#039;Count: 1&#039;)
  })

  it(&#039;increments 3 times correctly&#039;, async () => {
    const wrapper = mount(Counter)
    const button = wrapper.find(&#039;button&#039;)
    await button.trigger(&#039;click&#039;)
    await button.trigger(&#039;click&#039;)
    await button.trigger(&#039;click&#039;)
    expect(wrapper.text()).toContain(&#039;Count: 3&#039;)
  })
})

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

describe('ProductCard', () => {
  const product = { id: 1, name: 'MacBook Pro', price: 1999 }

  it('renders product name and price', () => {
    const wrapper = mount(ProductCard, {
      props: { product }
    })
    expect(wrapper.text()).toContain('MacBook Pro')
    expect(wrapper.text()).toContain('1999')
  })

  it('emits add-to-cart event with product when clicked', async () => {
    const wrapper = mount(ProductCard, { props: { product } })
    await wrapper.find('[data-testid="add-btn"]').trigger('click')
    expect(wrapper.emitted('add-to-cart')).toBeTruthy()
    expect(wrapper.emitted('add-to-cart')[0][0]).toEqual(product)
  })

  it('shows out-of-stock badge when inStock is false', () => {
    const wrapper = mount(ProductCard, {
      props: { product, inStock: false }
    })
    expect(wrapper.find('.oos-badge').exists()).toBe(true)
  })
})

// tests/useCounter.spec.js
import { describe, it, expect } from 'vitest'
import { useCounter } from '@/composables/useCounter'

describe('useCounter composable', () => {
  it('initializes with default value 0', () => {
    const { count } = useCounter()
    expect(count.value).toBe(0)
  })

  it('initializes with custom value', () => {
    const { count } = useCounter(10)
    expect(count.value).toBe(10)
  })

  it('increments correctly', () => {
    const { count, increment } = useCounter(5)
    increment()
    expect(count.value).toBe(6)
  })

  it('respects max boundary', () => {
    const { count, increment } = useCounter(10, { max: 10 })
    increment()
    expect(count.value).toBe(10)  // Should not exceed max
  })

  it('resets to initial value', () => {
    const { count, increment, reset } = useCounter(0)
    increment()
    increment()
    reset()
    expect(count.value).toBe(0)
  })
})

// tests/cart.store.spec.js
import { describe, it, expect, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useCartStore } from '@/stores/cart'

describe('Cart Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  const product = { id: 1, name: 'Vue Course', price: 49 }

  it('starts empty', () => {
    const cart = useCartStore()
    expect(cart.items).toHaveLength(0)
    expect(cart.isEmpty).toBe(true)
  })

  it('adds item correctly', () => {
    const cart = useCartStore()
    cart.addItem(product)
    expect(cart.items).toHaveLength(1)
    expect(cart.itemCount).toBe(1)
  })

  it('increments quantity for duplicate items', () => {
    const cart = useCartStore()
    cart.addItem(product)
    cart.addItem(product)
    expect(cart.items).toHaveLength(1)
    expect(cart.items[0].quantity).toBe(2)
  })

  it('calculates total correctly', () => {
    const cart = useCartStore()
    cart.addItem(product)
    cart.addItem(product)
    expect(cart.subtotal).toBe(98)
  })

  it('removes item', () => {
    const cart = useCartStore()
    cart.addItem(product)
    cart.removeItem(product.id)
    expect(cart.isEmpty).toBe(true)
  })
})