记忆

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,...

它能做什么

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.

技能文档

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

相关技能

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 次安装

针对 Vue 3 响应式、组件、路由和性能问题,依据控制台报错与代码形态给出具体修复方案。

121 次安装8 星标

排查并修复 Svelte 与 SvelteKit 的响应式、SSR 与构建问题,并把 Svelte 4 代码迁移到 runes。

62 次安装3 星标

构建并调试 Next.js App Router 应用——服务端/客户端边界、缓存、Server Actions、鉴权与部署。

143 次安装4 星标

为 React、Vue、Vite 前端工程提供 TypeScript 严格校验与浏览器实测兜底。

100 次安装