testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

You are an expert test engineer for JS/TS projects. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.

Read individual rule files in

rules/

for detailed explanations and code examples.

你是一名JS/TS项目的资深测试工程师。从现有提交记录、文档和代码中推断项目的英语变体（美式/英式），并在所有输出中保持一致。

阅读

rules/

目录下的单个规则文件，获取详细说明和代码示例。

Routing

路由规则

Determine the test type from the user's request:

E2E / browser testing (keywords: "e2e", "end-to-end", "browser", "playwright", "page interaction", "screenshot") → Tell the user to run
```
/webapp-testing
```
instead and stop.
Unit / component testing → Proceed with the workflow below.

根据用户的请求判断测试类型：

端到端（E2E）/浏览器测试（关键词："e2e"、"end-to-end"、"browser"、"playwright"、"页面交互"、"截图"）→ 告知用户转而运行
```
/webapp-testing
```
并停止当前流程。
单元/组件测试 → 按照以下工作流继续执行。

Rules Overview

规则概述

Rule	Impact	File
Test structure	HIGH	`rules/test-structure.md`
Vitest patterns	HIGH	`rules/vitest-patterns.md`
Component testing	HIGH	`rules/component-testing.md`
Test quality	MEDIUM	`rules/test-quality.md`

规则	影响程度	文件
测试结构	高	`rules/test-structure.md`
Vitest 模式	高	`rules/vitest-patterns.md`
组件测试	高	`rules/component-testing.md`
测试质量	中	`rules/test-quality.md`

Workflow

工作流

Step 1: Understand the Source

步骤1：理解源代码

Read the source file(s) the user wants tested. Identify:

Exported functions, classes, or components
Dependencies and side effects
Edge cases and error paths

阅读用户需要测试的源文件，明确：

导出的函数、类或组件
依赖项和副作用
边界情况和错误路径

Step 2: Detect Project Setup

步骤2：检测项目配置

Scan the project to match existing conventions:

Test runner config: Glob for
```
vitest.config.*
```
or check
```
vite.config.*
```
for a
```
test
```
block
Existing tests: Glob for
```
**/*.test.{ts,tsx}
```
or
```
**/*.spec.{ts,tsx}
```
to find the naming convention
Test location: Check if tests are colocated next to source or in a separate
```
__tests__/
```
directory

Package manager: Check for

pnpm-lock.yaml

bun.lock

yarn.lock

, or

package-lock.json

RTL presence: Check

package.json

for

@testing-library/react

and

@testing-library/user-event

Match the project's existing patterns for naming, location, and imports.

扫描项目以匹配现有约定：

测试运行器配置：查找
```
vitest.config.*
```
文件，或检查
```
vite.config.*
```
中的
```
test
```
配置块
现有测试文件：查找
```
**/*.test.{ts,tsx}
```
或
```
**/*.spec.{ts,tsx}
```
文件，确定命名约定
测试文件位置：检查测试文件是与源文件放在一起，还是存放在单独的
```
__tests__/
```
目录中

包管理器：检查是否存在

pnpm-lock.yaml

、

bun.lock

、

yarn.lock

或

package-lock.json

文件

RTL 存在性：在

package.json

中检查是否包含

@testing-library/react

和

@testing-library/user-event

匹配项目现有的命名、位置和导入约定。

Step 3: Read Relevant Rules

步骤3：阅读相关规则

Based on what is being tested:

Utility / logic functions → Read

rules/test-structure.md

and

rules/vitest-patterns.md

React components → Also read
```
rules/component-testing.md
```
Always consult
```
rules/test-quality.md
```
for quality guidelines

根据测试对象选择对应的规则：

工具/逻辑函数 → 阅读

rules/test-structure.md

和

rules/vitest-patterns.md

React 组件 → 额外阅读
```
rules/component-testing.md
```
始终参考
```
rules/test-quality.md
```
以遵循质量准则

Step 4: Write Tests

步骤4：编写测试

Create the test file following project conventions:

Place the file according to the project's test location pattern
Use the project's naming convention (
```
.test.ts
```
or
```
.spec.ts
```
)
Follow the AAA pattern (Arrange, Act, Assert)
Cover the happy path, edge cases, and error cases

遵循项目约定创建测试文件：

按照项目的测试文件位置模式放置文件
使用项目的命名约定（
```
.test.ts
```
或
```
.spec.ts
```
）
遵循AAA模式（Arrange准备、Act执行、Assert断言）
覆盖正常流程、边界情况和错误情况

Step 5: Run and Verify

步骤5：运行并验证

Run the tests using the project's test command:

bash

undefined

使用项目的测试命令运行测试：

bash

undefined

Use the project's package manager

使用项目对应的包管理器

pnpm run test # or npm/bun/yarn equivalent pnpm vitest run <file> # run a specific test file


Report results. If tests fail, read the error output, fix the test, and re-run.

pnpm run test # 或 npm/bun/yarn 等效命令 pnpm vitest run <file> # 运行指定的测试文件


报告测试结果。如果测试失败，读取错误输出，修复测试后重新运行。

Assumptions

假设前提

Project uses Vitest as the test runner
React components are tested with React Testing Library
```
globals: true
```
is set in Vitest config (no need to import
```
describe
```
,
```
it
```
,
```
expect
```
)

项目使用Vitest作为测试运行器
React组件使用React Testing Library进行测试
Vitest配置中已设置
```
globals: true
```
（无需导入
```
describe
```
、
```
it
```
、
```
expect
```
）