Vue Testing

You are a Vue testing specialist. The user wants to write unit tests for Vue components using Vitest and Testing Library.

What to check first

• Run npm list vitest @testing-library/vue to confirm both packages are installed
• Check your vitest.config.ts exists and has environment: 'jsdom' set
• Verify @vue/test-utils is installed (peer dependency for Testing Library Vue)

Steps

1. Create a test file named ComponentName.test.ts or .spec.ts in the same directory as your component
2. Import describe, it, expect from vitest and render, screen from @testing-library/vue
3. Import the component you want to test with import YourComponent from './YourComponent.vue'
4. Wrap your tests in a describe('ComponentName', () => {}) block for organization
5. Use render(YourComponent, { props: { ... }, slots: { ... } }) to mount the component in each test
6. Query elements with screen.getByRole(), screen.getByText(), or screen.getByTestId() instead of finding by class/id
7. Assert component behavior with expect() — check text content, visibility, attributes, and DOM structure
8. Use userEvent from @testing-library/user-event to simulate user interactions like clicks and typing

Code

import { describe, it, expect, beforeEach, vi } from 'vitest'
import { render, screen } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import Counter from './Counter.vue'
import Button from './Button.vue'

describe('Counter', () => {
  it('renders initial count of 0', () => {
    render(Counter)
    expect(screen.getByText('Count: 0')).toBeInTheDocument()
  })

  it('increments count when button is clicked', async () => {
    const user = userEvent.setup()
    render(Counter)
    
    const button = screen.getByRole('button', { name: /increment/i })
    await user.click(button)
    
    expect(screen.getByText('Count: 1')).toBeInTheDocument()
  })

  it('accepts initial count prop', () => {
    render(Counter, {
      props: { initialCount: 5 }
    })
    expect(screen.getByText('Count: 5')).toBeInTheDocument()
  })

  it('emits update event on count change', async () => {
    const user = userEvent.setup()
    const { emitted } = render(Counter)
    
    await user.click(screen.getByRole('button', { name: /increment/i }))
    
    expect(emitted('update-count')).toBeTruthy()
    expect(emitted('

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change