Effective Vitest Patterns for Component and Integration Testing

Vitest is powered by Vite, sharing the same transform pipeline, resolve configuration, and plugins.

Testing Component Behavior

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

describe('Counter', () => {
  it('increments count on click', async () => {
    render(<Counter />)
    const button = screen.getByRole('button', { name: /count/i })

    await userEvent.click(button)
    expect(screen.getByText('Count: 1')).toBeInTheDocument()
  })
})

Tests run directly against the development build with instant watch mode triggers.