testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Testing

测试

Write reliable tests with Vitest v4 dual configuration.

使用Vitest v4双配置编写可靠的测试用例。

Activation Conditions

激活条件

Writing or modifying tests
Debugging test failures
Setting up mocks
Questions about test configuration

编写或修改测试用例
调试测试失败问题
设置模拟（mock）项
测试配置相关问题

Quick Reference

快速参考

Action	Rule
Choose test type	`test-unit-vs-integration.md`
Mock modules	`test-mock-patterns.md`
Test stores	`test-zustand-stores.md`
Mock Connect APIs	`mock-transport.md`
Skip UI rendering tests	`no-ui-rendering-tests.md`

动作	规则
选择测试类型	`test-unit-vs-integration.md`
模拟模块	`test-mock-patterns.md`
测试存储	`test-zustand-stores.md`
模拟Connect API	`mock-transport.md`
跳过UI渲染测试	`no-ui-rendering-tests.md`

Commands

命令

bash

bun run test              # All tests (CI default)
bun run test:ci           # Sequential for CI
bun run test:unit         # Unit tests only
bun run test:integration  # Integration tests only
bun run test:ui           # Interactive UI
bun run test:watch        # Watch mode
bun run test:coverage     # Coverage report

bash

bun run test              # All tests (CI default)
bun run test:ci           # Sequential for CI
bun run test:unit         # Unit tests only
bun run test:integration  # Integration tests only
bun run test:ui           # Interactive UI
bun run test:watch        # Watch mode
bun run test:coverage     # Coverage report

Key Points

要点

```
.test.ts
```
= unit (Node.js),
```
.test.tsx
```
= integration (JSDOM)
Always use
```
test-utils/test-utils.tsx
```
for React component tests
Test that features are fully wired: UI elements must connect to actual functionality

```
.test.ts
```
= 单元测试（Node.js环境），
```
.test.tsx
```
= 集成测试（JSDOM环境）
React组件测试请始终使用
```
test-utils/test-utils.tsx
```
测试功能是否完全连通：UI元素必须关联到实际功能

Feature Completeness Testing

功能完整性测试

When implementing interactive features (buttons, forms, etc.):

Verify event handlers call the correct functions with proper parameters
Test that AbortSignals, callbacks, and other "plumbing" are passed through
Don't assume UI presence means functionality works - test the connection

实现交互功能（按钮、表单等）时：

验证事件处理程序以正确参数调用对应函数
测试AbortSignals、回调函数以及其他「链路」是否正确传递
不要假设UI存在就代表功能可用 - 需测试连接逻辑

When to Use This Skill

何时使用本技能

Writing
```
.test.ts
```
or
```
.test.tsx
```
files
Mocking modules, stores, or transports
Component behavior tests

NOT for: Multi-page user workflows → use e2e-tester

编写
```
.test.ts
```
或
```
.test.tsx
```
文件时
模拟模块、存储或传输层时
组件行为测试

不适用场景： 多页面用户工作流 → 请使用e2e-tester

Rules

规则

See

rules/

directory for detailed guidance.

查看

rules/

目录获取详细指南。