Testing Vue Apps Vitest Vue Test Utils: Tutorial, Examples, FAQs & Interview Tips

Testing Stack

The recommended testing stack for Vue 3 is:

Vitest - fast unit test runner (Vite-native, Jest-compatible API)
Vue Test Utils (VTU) - official Vue component testing library
@testing-library/vue - user-centric testing (alternative to VTU)
Playwright / Cypress - end-to-end testing

Vitest + Vue Test Utils - Component Testing

# Install testing dependencies
npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

# vite.config.js - add test config
# export default defineConfig({
#   plugins: [vue()],
#   test: {
#     environment: 'jsdom',
#     globals: true,
#   }
# })

# package.json scripts
# "test": "vitest",
# "test:run": "vitest run",
# "test:coverage": "vitest run --coverage"

# Run tests
npm run test        # watch mode
npm run test:run    # single run
npm run test:coverage  # with coverage report

// Counter.test.js - testing a Counter component
import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'

describe('Counter', () => {
    let wrapper

    beforeEach(() => {
        wrapper = mount(Counter, {
            props: { initialCount: 0 }
        })
    })

    it('renders initial count', () => {
        expect(wrapper.text()).toContain('0')
    })

    it('increments count when + button clicked', async () => {
        const button = wrapper.find('[data-testid="increment"]')
        await button.trigger('click')
        expect(wrapper.text()).toContain('1')
    })

    it('decrements count when - button clicked', async () => {
        // First increment to 1
        await wrapper.find('[data-testid="increment"]').trigger('click')
        // Then decrement
        await wrapper.find('[data-testid="decrement"]').trigger('click')
        expect(wrapper.text()).toContain('0')
    })

    it('resets count when reset button clicked', async () => {
        await wrapper.find('[data-testid="increment"]').trigger('click')
        await wrapper.find('[data-testid="increment"]').trigger('click')
        await wrapper.find('[data-testid="reset"]').trigger('click')
        expect(wrapper.text()).toContain('0')
    })

    it('emits update event when count changes', async () => {
        await wrapper.find('[data-testid="increment"]').trigger('click')
        expect(wrapper.emitted('update')).toBeTruthy()
        expect(wrapper.emitted('update')[0]).toEqual([1])
    })

    it('does not go below 0', async () => {
        await wrapper.find('[data-testid="decrement"]').trigger('click')
        expect(wrapper.text()).toContain('0')
    })

    it('accepts initialCount prop', () => {
        const w = mount(Counter, { props: { initialCount: 10 } })
        expect(w.text()).toContain('10')
    })
})

// UserList.test.js - testing async component with API
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import UserList from '@/components/UserList.vue'

// Mock fetch
const mockUsers = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob',   email: 'bob@example.com' },
]

describe('UserList', () => {
    beforeEach(() => {
        // Reset mocks before each test
        vi.restoreAllMocks()
    })

    it('shows loading state initially', () => {
        global.fetch = vi.fn(() => new Promise(() => {}))  // never resolves
        const wrapper = mount(UserList)
        expect(wrapper.find('[data-testid="loading"]').exists()).toBe(true)
    })

    it('renders users after successful fetch', async () => {
        global.fetch = vi.fn(() =>
            Promise.resolve({
                ok: true,
                json: () => Promise.resolve(mockUsers)
            })
        )

        const wrapper = mount(UserList)
        await flushPromises()  // wait for all promises to resolve

        expect(wrapper.find('[data-testid="loading"]').exists()).toBe(false)
        expect(wrapper.findAll('[data-testid="user-item"]')).toHaveLength(2)
        expect(wrapper.text()).toContain('Alice')
        expect(wrapper.text()).toContain('Bob')
    })

    it('shows error message on fetch failure', async () => {
        global.fetch = vi.fn(() => Promise.reject(new Error('Network error')))

        const wrapper = mount(UserList)
        await flushPromises()

        expect(wrapper.find('[data-testid="error"]').exists()).toBe(true)
        expect(wrapper.text()).toContain('Network error')
    })

    it('filters users by search query', async () => {
        global.fetch = vi.fn(() =>
            Promise.resolve({ ok: true, json: () => Promise.resolve(mockUsers) })
        )

        const wrapper = mount(UserList)
        await flushPromises()

        const searchInput = wrapper.find('[data-testid="search"]')
        await searchInput.setValue('Alice')

        expect(wrapper.findAll('[data-testid="user-item"]')).toHaveLength(1)
        expect(wrapper.text()).toContain('Alice')
        expect(wrapper.text()).not.toContain('Bob')
    })

    it('deletes user when delete button clicked', async () => {
        global.fetch = vi.fn(() =>
            Promise.resolve({ ok: true, json: () => Promise.resolve(mockUsers) })
        )

        const wrapper = mount(UserList)
        await flushPromises()

        const deleteButtons = wrapper.findAll('[data-testid="delete-user"]')
        await deleteButtons[0].trigger('click')

        expect(wrapper.findAll('[data-testid="user-item"]')).toHaveLength(1)
        expect(wrapper.text()).not.toContain('Alice')
    })
})

Deep Dive: Testing in Real Projects

Understanding Testing is not just about syntax. In production applications, this topic directly affects maintainability, debugging speed, and team collaboration. Focus on readability, small reusable patterns, and predictable state flow when implementing Testing.

A practical approach is to first implement the simplest working version, then refactor into reusable pieces (components/composables/stores) only when duplication appears. This helps keep your Vue codebase clean while avoiding over-engineering.

Common Mistakes to Avoid

Mixing too many responsibilities in one component instead of separating logic by concern.
Skipping meaningful naming for variables, emits, and component props.
Ignoring edge cases like empty data, loading states, and error handling.
Optimizing too early before measuring real bottlenecks in browser devtools.
Not creating small test scenarios to validate behavior after each change.

Mini Practice Checklist

Build a small demo focused only on Testing.
Add one edge case (empty/loading/error) and handle it cleanly.
Refactor repeated logic into a reusable function/composable.
Add clear comments only where logic is non-obvious.
Verify behavior with manual testing and Vue Devtools.

Key Takeaways

This chapter on Testing focuses on practical Vue 3 patterns used in real projects.
Prefer the Composition API with script setup for cleaner and more scalable component logic.
Keep components focused and move reusable logic into composables when complexity grows.
Use Vue Devtools to inspect component state, props, emits, and performance during development.
Write small experiments for each concept before applying it in production code.
After finishing this chapter, continue to the next related topic in the Vue roadmap.

Testing Vue Apps Vitest Vue Test Utils: Tutorial, Examples, FAQs & Interview Tips

Testing Stack

Deep Dive: Testing in Real Projects

Common Mistakes to Avoid

Mini Practice Checklist

Level Up Your Vue js Skills

Popular Tutorials

Ready to Level Up Your Skills?