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.
记忆
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.
- Run the test suite — From the package or workspace root, run the same command CI uses (check
package.jsonscripts; oftenvitest run,pnpm test, ornpm test). Pass: exit code is 0 and the report shows zero failing tests. - Async matchers — Pass: every
expect(…).resolvesandexpect(…).rejectsis prefixed withawait(await expect(...)), as in Async Testing. A line whereresolvesorrejectsappears withoutawaitfails 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
| Method | Purpose |
|---|---|
it() / test() | Define test |
describe() | Group tests |
beforeEach() / afterEach() | Per-test hooks |
beforeAll() / afterAll() | Per-suite hooks |
.skip | Skip test/suite |
.only | Run only this |
.todo | Placeholder |
.concurrent | Parallel execution |
.each([...]) | Parameterized tests |
相关技能
针对 Vue 3 响应式、组件、路由和性能问题,依据控制台报错与代码形态给出具体修复方案。
排查并修复 Svelte 与 SvelteKit 的响应式、SSR 与构建问题,并把 Svelte 4 代码迁移到 runes。
构建并调试 Next.js App Router 应用——服务端/客户端边界、缓存、Server Actions、鉴权与部署。
为 React、Vue、Vite 前端工程提供 TypeScript 严格校验与浏览器实测兜底。
编写、调试与调优 Playwright 测试,涵盖定位器策略、追踪诊断与 CI 友好的超时配置。