Frontend Testing

Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons...

Security Scan

An instruction-only frontend testing helper that is internally consistent with its description and does not request extra permissions, installs, or credentials.

Purpose & Capability

Name/description (frontend unit/component/integration/E2E testing) match the SKILL.md content and README. The guidance focuses on Jest/Vitest/RTL/MSW/Playwright and producing test code and config — all expected for this purpose.

Instruction Scope

SKILL.md is an authoring guide: it asks the agent to ask clarifying questions, design test cases, and produce example test code and install commands. It says to 'read code' in context of the user's tested object, which is appropriate; it does not instruct the agent to access unrelated system files, credentials, or external endpoints.

Install Mechanism

No install spec and no code files — instruction-only. No downloads, package installs, or scripts are specified, so nothing will be written to disk by the skill itself.

Credentials

No required environment variables, credentials, or config paths are declared. The docs mention mocking environment boundaries as testing advice but do not request access to secrets or external service tokens.

Persistence & Privilege

always:false and no requests to modify agent/system settings. The skill can be invoked autonomously per platform defaults, but it does not request elevated persistence or cross-skill configuration.

Assessment

This skill appears to be a straightforward testing advisor and is coherent with its stated purpose. Before using it, only share the code needed for test-writing (avoid pasting secrets, API keys, .env files, or proprietary data). Because it is instruction-only, it won’t install software or access your system by itself — but generated install commands (e.g., npm/pnpm/vite setups) are suggestions you would run yourself, so review them before executing. If you plan to let the agent access a private repo or run commands, confirm what files it will read and avoid exposing credentials.

前端测试（Frontend Testing）

帮助设计测试策略、编写单元/组件/集成/E2E 测试，以及 mock、断言与覆盖率考量。

触发场景

• 用户说「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」
• 需求「提高覆盖率」「回归不放心」「改完怕坏」
• 已有测试框架，需要补用例或重构测试

测试分层与选型

类型	适用	常用工具	关注点
单元	纯函数、工具、hooks	Jest / Vitest	输入输出、边界、副作用
组件	组件渲染与交互	React Testing Library / Vue Test Utils	用户行为、可访问性、状态
集成	多模块/请求/路由	Jest+MSW / Vitest+MSW	流程、接口 mock、错误态
E2E	关键用户路径	Playwright / Cypress	真实浏览器、稳定选择器、环境

执行流程

1. 先搞清楚用户要测什么

用户描述	实际需求	第一步
「写测试」「补测试」	不知道从哪里开始	问：被测对象是什么（函数/组件/页面流程）？现有测试框架是什么？
「这个函数怎么测」「这个组件怎么测」	具体对象的测试	直接读代码，给出用例列表 + 关键用例的代码
「测试跑不过」「mock 不生效」	具体 bug	看报错信息，定位问题，不要先讲测试理论
「覆盖率不够」	提高覆盖率	先问：覆盖率卡在哪个文件/模块？不要盲目追 100%
「用 Jest 还是 Vitest」	选型	给明确推荐：新项目用 Vitest（更快、ESM 原生支持）；已有 Jest 的项目不要为了换而换

2. 拿到被测对象后，按这个顺序设计用例

第一步：识别测试类型

• 纯函数/工具函数 → 单元测试，直接测输入输出
• React/Vue 组件 → 组件测试，用 Testing Library 模拟用户行为
• 涉及接口/路由/多组件协作 → 集成测试，用 MSW mock 接口
• 关键用户路径（登录、下单、支付）→ E2E，用 Playwright

第二步：列用例，覆盖这四类场景

• 正向：主流程能跑通
• 边界：空值、最大值、特殊字符
• 异常：接口失败、权限不足、超时
• 交互：点击、输入、提交、取消（组件测试）

第三步：给代码，不要只给用例列表

至少给出 1-2 个完整的测试用例代码，包含 mock 设置、断言、cleanup。

3. 遇到这些情况，按以下方式处理

用户没有测试框架 → 推荐：Vitest + React Testing Library + MSW（接口 mock）+ Playwright（E2E） → 给出安装命令和最小配置，不要只说「安装 X」

组件测试找不到元素 → 优先用 getByRole（语义化，最稳定） → 其次 getByLabelText（表单）、getByText → 最后才用 getByTestId（加 data-testid） → 不要用 querySelector，测试不应该依赖 CSS 类名

异步测试不稳定 → 用 waitFor 等待断言，不要用 setTimeout → 用 findBy* 代替 getBy* 处理异步渲染 → 确保每个测试后清理 mock（afterEach(() => server.resetHandlers())）

不知道 mock 什么 → 只 mock 系统边界：HTTP 请求（MSW）、时间（vi.setSystemTime）、环境变量 → 不要 mock 被测模块内部的函数，那样测的是 mock 不是代码

4. 覆盖率的正确用法

• 覆盖率是发现没测到的路径的工具，不是目标
• 80% 覆盖率但覆盖了核心路径 > 100% 覆盖率但全是无意义的 snapshot
• 看覆盖率报告时，重点看分支覆盖率（branch coverage），不是行覆盖率

输出模板

## 测试方案 / 用例说明

### 范围与工具
- 被测对象：…
- 框架：Jest / Vitest / RTL / Playwright / …

### 用例列表
| 场景 | 类型 | 要点 |
|------|------|------|
| … | 单元/组件/集成/E2E | … |

### Mock 与环境
- 接口：MSW handlers / …
- 路由/时间：…

### 示例代码（可选）
- 关键 1–2 个用例的代码片段

项目相关

• React：RTL + Jest/Vitest；hooks 用 renderHook；路由用 MemoryRouter
• Vue：Vue Test Utils + Jest/Vitest；Composition API 同 renderHook 思路
• Next.js：可测 App Router 页面用 testing-library；API 用 MSW 或 node mock
• E2E：Playwright 优先（多浏览器、稳定）；选择器优先 role > text > testid