Memory

Vitest Testing

Vitest testing framework patterns and best practices. Use when writing unit tests, integration tests, configuring vitest.config, mocking with vi.mock/vi.fn,...

What it does

Vitest testing framework patterns and best practices. Use when writing unit tests, integration tests, configuring vitest.config, mocking with vi.mock/vi.fn, using snapshots, or setting up test coverage. Triggers on describe, it, expect, vi.mock, vi.fn, beforeEach, afterEach, vitest.

The skill document

Vitest Best Practices

Quick Reference

import { describe, it, expect, beforeEach, vi } from 'vitest'

describe('feature name', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('should do something specific', () => {
    expect(actual).toBe(expected)
  })

  it.todo('planned test')
  it.skip('temporarily disabled')
  it.only('run only this during dev')
})

Common Assertions

// Equality
expect(value).toBe(42)                    // Strict (===)
expect(obj).toEqual({ a: 1 })             // Deep equality
expect(obj).toStrictEqual({ a: 1 })       // Strict deep (checks types)

// Truthiness
expect(value).toBeTruthy()
expect(value).toBeFalsy()
expect(value).toBeNull()
expect(value).toBeUndefined()

// Numbers
expect(0.1 + 0.2).toBeCloseTo(0.3)
expect(value).toBeGreaterThan(5)

// Strings/Arrays
expect(str).toMatch(/pattern/)
expect(str).toContain('substring')
expect(array).toContain(item)
expect(array).toHaveLength(3)

// Objects
expect(obj).toHaveProperty('key')
expect(obj).toHaveProperty('nested.key', 'value')
expect(obj).toMatchObject({ subset: 'of properties' })

// Exceptions
expect(() => fn()).toThrow()
expect(() => fn()).toThrow('error message')
expect(() => fn()).toThrow(/pattern/)

Async Testing

// Async/await (preferred)
it('fetches data', async () => {
  const data = await fetchData()
  expect(data).toEqual({ id: 1 })
})

// Promise matchers - ALWAYS await these
await expect(fetchData()).resolves.toEqual({ id: 1 })
await expect(fetchData()).rejects.toThrow('Error')

// Wrong - creates false positive
expect(promise).resolves.toBe(value)  // Missing await!

Quick Mock Reference

const mockFn = vi.fn()
mockFn.mockReturnValue(42)
mockFn.mockResolvedValue({ data: 'value' })

expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith('arg1', 'arg2')
expect(mockFn).toHaveBeenCalledTimes(2)

Verification gates

Use this sequence when you add or change tests; each step has an objective pass condition.

  1. Run the test suite — From the package or workspace root, run the same command CI uses (check package.json scripts; often vitest run, pnpm test, or npm test). Pass: exit code is 0 and the report shows zero failing tests.
  2. Async matchersPass: every expect(…).resolves and expect(…).rejects is prefixed with await (await expect(...)), as in Async Testing. A line where resolves or rejects appears without await fails this gate.

Additional Documentation

  • Mocking: See references/mocking.md for module mocking, spying, cleanup
  • Configuration: See references/config.md for vitest.config, setup files, coverage
  • Patterns: See references/patterns.md for timers, snapshots, anti-patterns

Test Methods Quick Reference

MethodPurpose
it() / test()Define test
describe()Group tests
beforeEach() / afterEach()Per-test hooks
beforeAll() / afterAll()Per-suite hooks
.skipSkip test/suite
.onlyRun only this
.todoPlaceholder
.concurrentParallel execution
.each([...])Parameterized tests

Related skills

React architecture patterns, TypeScript, Next.js, hooks, and testing. Use when working with React component structure, state management, Next.js routing, Vitest, React Testing Library, or reviewing React code. For visual design and aesthetic direction, use frontend-design instead.

40 installs

Diagnose and fix Vue 3 reactivity, component, routing, and performance bugs with specific fixes grounded in console output and code shape.

121 installs8 stars

Diagnose and fix Svelte and SvelteKit reactivity, SSR, and build failures, and migrate Svelte 4 code to runes.

62 installs3 stars

Build and debug Next.js App Router apps — server/client boundaries, caching, Server Actions, auth, and deployment.

143 installs4 stars

Ship React, Vue, and Vite Web frontends with strict TypeScript and browser-validated checks.

100 installs