vue-component-testing

Vue Component Testing Skill

Step 1 — Classify What Needs to Be Tested

For each piece of code, assign a test tier:

• Composable / store action / pure function → Unit test (Vitest, no DOM)
• Component behaviour / user interaction / emitted events → Component test (@testing-library/vue + Vitest)
• User flow across pages / real navigation → E2E (Playwright)

List all files in scope and assign each a tier before writing any tests.

Step 2 — Write Unit Tests (Composables and Stores)

• Composable: import and call directly, assert returned refs/computed values. Use setActivePinia(createPinia()) in beforeEach if the composable accesses a store.
• Store: setActivePinia(createPinia()) in beforeEach, call actions directly, assert state. Test getters by patching state.
• No DOM, no component mounting — pure JS/TS only.

import { setActivePinia, createPinia } from 'pinia'
import { beforeEach, describe, expect, it } from 'vitest'
import { useAuthStore } from './auth.store'

let store: ReturnType<typeof useAuthStore>
beforeEach(() => { setActivePinia(createPinia()); store = useAuthStore() })

it('login sets user', async () => {
  await store.login({ email: '[email protected]', password: 'secret' })
  expect(store.user).not.toBeNull()
})

Step 3 — Write Component Tests

• Use @testing-library/vue for user-centric assertions: getByRole, findByText, userEvent.
• Use @vue/test-utils when asserting emitted events, inspecting component output, or working with slots.
• Use createTestingPinia() from @pinia/testing to stub store actions.
• Mount the real component (not shallow) unless the child is a heavy external library.
• Assert: what the user sees (text, roles, visibility), which events are emitted, which store actions are called.
• Do NOT assert: internal refs, CSS classes, snapshot blobs.
• In TypeScript projects, keep TS/JS imports ESM-only and use aliases for cross-directory imports.

import { render, screen, fireEvent } from '@testing-library/vue'
import { createTestingPinia } from '@pinia/testing'
import { describe, expect, it, vi } from 'vitest'
import BaseButton from '<alias>/components/BaseButton.vue'

const mockTrack = vi.fn()
vi.mock('<alias>/lib/analytics', () => ({ trackEvent: mockTrack }))

it('tracks click event on button press', async () => {
  render(BaseButton, {
    props: { label: 'Save' },
    global: { plugins: [createTestingPinia()] },
  })
  await fireEvent.click(screen.getByRole('button', { name: 'Save' }))
  expect(mockTrack).toHaveBeenCalledWith('button_click', expect.any(Object))
})