{"id":"7defb2b0-1efe-44a4-8b8f-23925a61dd3c","entityType":"agent","slug":"clawhub-wangzhiming1999-frontend-testing","name":"Frontend Testing","canonicalUrl":"https://www.xpersona.co/agent/clawhub-wangzhiming1999-frontend-testing","canonicalPath":"/agent/clawhub-wangzhiming1999-frontend-testing","generatedAt":"2026-10-10T10:43:12.642Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":null},"description":"Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons... Skill: Frontend Testing Owner: wangzhiming1999 Summary: Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T06:57:18.225Z | user Publish from oliver-skill repository v1.0.0 | 2026-04-20T06:57:10.535Z | user Publish from oliver-skill repository Archive ind","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.6K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s17fabtxz382txawq79jmahrh983z3hj:frontend-testing","sourceUrl":"https://clawhub.ai/wangzhiming1999/frontend-testing","homepage":"https://clawhub.ai/wangzhiming1999/skills/frontend-testing","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/wangzhiming1999/frontend-testing","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/wangzhiming1999/skills/frontend-testing","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":64,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":null},"stars":null,"forks":null,"downloads":1593,"packageName":null,"latestVersion":"1.0.1","tractionLabel":"1.6K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T07:24:51.410Z","lastCrawledAt":"2026-10-10T07:24:51.410Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T07:24:51.410Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.1","createdAt":"2026-04-20T06:57:18.225Z","changelog":"Publish from oliver-skill repository","fileCount":5,"zipByteSize":5192},{"version":"1.0.0","createdAt":"2026-04-20T06:57:10.535Z","changelog":"Publish from oliver-skill repository","fileCount":4,"zipByteSize":4028}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17fabtxz382txawq79jmahrh983z3hj:frontend-testing","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T10:43:12.642Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangzhiming1999-frontend-testing/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":null},"readme":"Skill: Frontend Testing\n\nOwner: wangzhiming1999\n\nSummary: Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons...\n\nTags: latest:1.0.1\n\nVersion history:\n\nv1.0.1 | 2026-04-20T06:57:18.225Z | user\n\nPublish from oliver-skill repository\n\nv1.0.0 | 2026-04-20T06:57:10.535Z | user\n\nPublish from oliver-skill repository\n\nArchive index:\n\nArchive v1.0.1: 5 files, 5192 bytes\n\nFiles: clawhub.json (754b), README.md (564b), skill-card.md (2176b), SKILL.md (4840b), _meta.json (135b)\n\nFile v1.0.1:SKILL.md\n\n---\r\nname: frontend-testing\r\ndescription: Designs and writes frontend tests: unit, component, integration, E2E; test structure, mocking, and coverage. Use when 前端测试, 单元测试, 组件测试, E2E, Jest, Vitest, Testing Library, or writing tests.\r\n---\r\n\r\n# 前端测试（Frontend Testing）\r\n\r\n帮助设计测试策略、编写单元/组件/集成/E2E 测试，以及 mock、断言与覆盖率考量。\r\n\r\n## 触发场景\r\n\r\n- 用户说「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」\r\n- 需求「提高覆盖率」「回归不放心」「改完怕坏」\r\n- 已有测试框架，需要补用例或重构测试\r\n\r\n## 测试分层与选型\r\n\r\n| 类型 | 适用 | 常用工具 | 关注点 |\r\n|------|------|----------|--------|\r\n| 单元 | 纯函数、工具、hooks | Jest / Vitest | 输入输出、边界、副作用 |\r\n| 组件 | 组件渲染与交互 | React Testing Library / Vue Test Utils | 用户行为、可访问性、状态 |\r\n| 集成 | 多模块/请求/路由 | Jest+MSW / Vitest+MSW | 流程、接口 mock、错误态 |\r\n| E2E | 关键用户路径 | Playwright / Cypress | 真实浏览器、稳定选择器、环境 |\r\n\r\n## 执行流程\r\n\r\n### 1. 先搞清楚用户要测什么\r\n\r\n| 用户描述 | 实际需求 | 第一步 |\r\n|---------|---------|-------|\r\n| 「写测试」「补测试」 | 不知道从哪里开始 | 问：被测对象是什么（函数/组件/页面流程）？现有测试框架是什么？ |\r\n| 「这个函数怎么测」「这个组件怎么测」 | 具体对象的测试 | 直接读代码，给出用例列表 + 关键用例的代码 |\r\n| 「测试跑不过」「mock 不生效」 | 具体 bug | 看报错信息，定位问题，不要先讲测试理论 |\r\n| 「覆盖率不够」 | 提高覆盖率 | 先问：覆盖率卡在哪个文件/模块？不要盲目追 100% |\r\n| 「用 Jest 还是 Vitest」 | 选型 | 给明确推荐：新项目用 Vitest（更快、ESM 原生支持）；已有 Jest 的项目不要为了换而换 |\r\n\r\n### 2. 拿到被测对象后，按这个顺序设计用例\r\n\r\n**第一步：识别测试类型**\r\n- 纯函数/工具函数 → 单元测试，直接测输入输出\r\n- React/Vue 组件 → 组件测试，用 Testing Library 模拟用户行为\r\n- 涉及接口/路由/多组件协作 → 集成测试，用 MSW mock 接口\r\n- 关键用户路径（登录、下单、支付）→ E2E，用 Playwright\r\n\r\n**第二步：列用例，覆盖这四类场景**\r\n- 正向：主流程能跑通\r\n- 边界：空值、最大值、特殊字符\r\n- 异常：接口失败、权限不足、超时\r\n- 交互：点击、输入、提交、取消（组件测试）\r\n\r\n**第三步：给代码，不要只给用例列表**\r\n\r\n至少给出 1-2 个完整的测试用例代码，包含 mock 设置、断言、cleanup。\r\n\r\n### 3. 遇到这些情况，按以下方式处理\r\n\r\n**用户没有测试框架**\r\n→ 推荐：Vitest + React Testing Library + MSW（接口 mock）+ Playwright（E2E）\r\n→ 给出安装命令和最小配置，不要只说「安装 X」\r\n\r\n**组件测试找不到元素**\r\n→ 优先用 `getByRole`（语义化，最稳定）\r\n→ 其次 `getByLabelText`（表单）、`getByText`\r\n→ 最后才用 `getByTestId`（加 `data-testid`）\r\n→ 不要用 `querySelector`，测试不应该依赖 CSS 类名\r\n\r\n**异步测试不稳定**\r\n→ 用 `waitFor` 等待断言，不要用 `setTimeout`\r\n→ 用 `findBy*` 代替 `getBy*` 处理异步渲染\r\n→ 确保每个测试后清理 mock（`afterEach(() => server.resetHandlers())`）\r\n\r\n**不知道 mock 什么**\r\n→ 只 mock 系统边界：HTTP 请求（MSW）、时间（`vi.setSystemTime`）、环境变量\r\n→ 不要 mock 被测模块内部的函数，那样测的是 mock 不是代码\r\n\r\n### 4. 覆盖率的正确用法\r\n\r\n- 覆盖率是发现**没测到的路径**的工具，不是目标\r\n- 80% 覆盖率但覆盖了核心路径 > 100% 覆盖率但全是无意义的 snapshot\r\n- 看覆盖率报告时，重点看**分支覆盖率**（branch coverage），不是行覆盖率\r\n\r\n## 输出模板\r\n\r\n```markdown\r\n## 测试方案 / 用例说明\r\n\r\n### 范围与工具\r\n- 被测对象：…\r\n- 框架：Jest / Vitest / RTL / Playwright / …\r\n\r\n### 用例列表\r\n| 场景 | 类型 | 要点 |\r\n|------|------|------|\r\n| … | 单元/组件/集成/E2E | … |\r\n\r\n### Mock 与环境\r\n- 接口：MSW handlers / …\r\n- 路由/时间：…\r\n\r\n### 示例代码（可选）\r\n- 关键 1–2 个用例的代码片段\r\n```\r\n\r\n## 项目相关\r\n\r\n- React：RTL + Jest/Vitest；hooks 用 renderHook；路由用 MemoryRouter\r\n- Vue：Vue Test Utils + Jest/Vitest；Composition API 同 renderHook 思路\r\n- Next.js：可测 App Router 页面用 testing-library；API 用 MSW 或 node mock\r\n- E2E：Playwright 优先（多浏览器、稳定）；选择器优先 role > text > testid\n\nFile v1.0.1:README.md\n\n# Frontend Testing（前端测试）\r\n\r\n设计测试策略并编写单元/组件/集成/E2E 测试，处理 mock 与覆盖率。\r\n\r\n## What It Does\r\n\r\n- 测试分层与工具选型（Jest/Vitest、RTL、Playwright 等）\r\n- 用例设计、Mock 策略、断言与可维护性\r\n- 输出测试方案或示例代码\r\n\r\n## How to Use\r\n\r\n当用户提到「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」或提高覆盖率时启用。\r\n\r\n## Requirements\r\n\r\n- 无额外依赖；按项目已有测试框架给出建议\n\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn7d79fmw28v2we1sjpqk7mpfd829g7s\",\n  \"slug\": \"frontend-testing\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1776668238225\n}\n\nFile v1.0.1:skill-card.md\n\n## Description:\n\nDesigns frontend unit, component, integration, and E2E testing strategies and examples, including test structure, mocking, assertions, and coverage guidance.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[wangzhiming1999](https://clawhub.ai/user/wangzhiming1999)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to plan frontend test coverage, choose suitable testing tools, and draft test plans, mocks, assertions, configuration, shell commands, and representative Jest, Vitest, Testing Library, MSW, Playwright, or Cypress examples.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Broad trigger wording may activate the skill for generic testing or coverage requests that are not frontend-specific.\n\nMitigation: Confirm the target code, framework, and testing scope before applying frontend-specific testing guidance.\n\nRisk: Generated test code, configuration, or shell commands may not match the project's existing framework setup.\n\nMitigation: Review proposed code and commands against the repository's package manager, test runner, mocks, and CI configuration before use.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/wangzhiming1999/skills/frontend-testing)\n- [ClawHub Publisher Profile](https://clawhub.ai/user/wangzhiming1999)\n- [Skill README](artifact/README.md)\n- [Skill Instructions](artifact/SKILL.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown with test plans, tables, inline shell commands, and code blocks]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include framework-specific setup, mock strategy, assertions, coverage guidance, and one or two complete example test cases.]\n\n## Skill Version(s):\n\n1.0.1 (source: ClawHub release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.1:clawhub.json\n\n{\r\n  \"name\": \"Frontend Testing (前端测试)\",\r\n  \"tagline\": \"设计测试策略，编写单元/组件/集成/E2E 测试，处理 mock 与覆盖率\",\r\n  \"description\": \"前端测试技能：测试分层与选型（单元/组件/集成/E2E）、用例设计、Mock 策略、写法与断言、覆盖率与维护。适用于前端测试、单元测试、组件测试、E2E、Jest、Vitest、Testing Library 等场景。\",\r\n  \"category\": \"development\",\r\n  \"tags\": [\"testing\", \"jest\", \"vitest\", \"rtl\", \"e2e\", \"playwright\", \"msw\", \"前端测试\"],\r\n  \"version\": \"1.0.0\",\r\n  \"license\": \"MIT\",\r\n  \"pricing\": \"free\",\r\n  \"support_url\": \"https://github.com/wangzhiming1999/oliver-skill/issues\",\r\n  \"homepage\": \"https://github.com/wangzhiming1999/oliver-skill\"\r\n}\n\nArchive v1.0.0: 4 files, 4028 bytes\n\nFiles: clawhub.json (754b), README.md (564b), SKILL.md (4840b), _meta.json (135b)\n\nFile v1.0.0:SKILL.md\n\n---\r\nname: frontend-testing\r\ndescription: Designs and writes frontend tests: unit, component, integration, E2E; test structure, mocking, and coverage. Use when 前端测试, 单元测试, 组件测试, E2E, Jest, Vitest, Testing Library, or writing tests.\r\n---\r\n\r\n# 前端测试（Frontend Testing）\r\n\r\n帮助设计测试策略、编写单元/组件/集成/E2E 测试，以及 mock、断言与覆盖率考量。\r\n\r\n## 触发场景\r\n\r\n- 用户说「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」\r\n- 需求「提高覆盖率」「回归不放心」「改完怕坏」\r\n- 已有测试框架，需要补用例或重构测试\r\n\r\n## 测试分层与选型\r\n\r\n| 类型 | 适用 | 常用工具 | 关注点 |\r\n|------|------|----------|--------|\r\n| 单元 | 纯函数、工具、hooks | Jest / Vitest | 输入输出、边界、副作用 |\r\n| 组件 | 组件渲染与交互 | React Testing Library / Vue Test Utils | 用户行为、可访问性、状态 |\r\n| 集成 | 多模块/请求/路由 | Jest+MSW / Vitest+MSW | 流程、接口 mock、错误态 |\r\n| E2E | 关键用户路径 | Playwright / Cypress | 真实浏览器、稳定选择器、环境 |\r\n\r\n## 执行流程\r\n\r\n### 1. 先搞清楚用户要测什么\r\n\r\n| 用户描述 | 实际需求 | 第一步 |\r\n|---------|---------|-------|\r\n| 「写测试」「补测试」 | 不知道从哪里开始 | 问：被测对象是什么（函数/组件/页面流程）？现有测试框架是什么？ |\r\n| 「这个函数怎么测」「这个组件怎么测」 | 具体对象的测试 | 直接读代码，给出用例列表 + 关键用例的代码 |\r\n| 「测试跑不过」「mock 不生效」 | 具体 bug | 看报错信息，定位问题，不要先讲测试理论 |\r\n| 「覆盖率不够」 | 提高覆盖率 | 先问：覆盖率卡在哪个文件/模块？不要盲目追 100% |\r\n| 「用 Jest 还是 Vitest」 | 选型 | 给明确推荐：新项目用 Vitest（更快、ESM 原生支持）；已有 Jest 的项目不要为了换而换 |\r\n\r\n### 2. 拿到被测对象后，按这个顺序设计用例\r\n\r\n**第一步：识别测试类型**\r\n- 纯函数/工具函数 → 单元测试，直接测输入输出\r\n- React/Vue 组件 → 组件测试，用 Testing Library 模拟用户行为\r\n- 涉及接口/路由/多组件协作 → 集成测试，用 MSW mock 接口\r\n- 关键用户路径（登录、下单、支付）→ E2E，用 Playwright\r\n\r\n**第二步：列用例，覆盖这四类场景**\r\n- 正向：主流程能跑通\r\n- 边界：空值、最大值、特殊字符\r\n- 异常：接口失败、权限不足、超时\r\n- 交互：点击、输入、提交、取消（组件测试）\r\n\r\n**第三步：给代码，不要只给用例列表**\r\n\r\n至少给出 1-2 个完整的测试用例代码，包含 mock 设置、断言、cleanup。\r\n\r\n### 3. 遇到这些情况，按以下方式处理\r\n\r\n**用户没有测试框架**\r\n→ 推荐：Vitest + React Testing Library + MSW（接口 mock）+ Playwright（E2E）\r\n→ 给出安装命令和最小配置，不要只说「安装 X」\r\n\r\n**组件测试找不到元素**\r\n→ 优先用 `getByRole`（语义化，最稳定）\r\n→ 其次 `getByLabelText`（表单）、`getByText`\r\n→ 最后才用 `getByTestId`（加 `data-testid`）\r\n→ 不要用 `querySelector`，测试不应该依赖 CSS 类名\r\n\r\n**异步测试不稳定**\r\n→ 用 `waitFor` 等待断言，不要用 `setTimeout`\r\n→ 用 `findBy*` 代替 `getBy*` 处理异步渲染\r\n→ 确保每个测试后清理 mock（`afterEach(() => server.resetHandlers())`）\r\n\r\n**不知道 mock 什么**\r\n→ 只 mock 系统边界：HTTP 请求（MSW）、时间（`vi.setSystemTime`）、环境变量\r\n→ 不要 mock 被测模块内部的函数，那样测的是 mock 不是代码\r\n\r\n### 4. 覆盖率的正确用法\r\n\r\n- 覆盖率是发现**没测到的路径**的工具，不是目标\r\n- 80% 覆盖率但覆盖了核心路径 > 100% 覆盖率但全是无意义的 snapshot\r\n- 看覆盖率报告时，重点看**分支覆盖率**（branch coverage），不是行覆盖率\r\n\r\n## 输出模板\r\n\r\n```markdown\r\n## 测试方案 / 用例说明\r\n\r\n### 范围与工具\r\n- 被测对象：…\r\n- 框架：Jest / Vitest / RTL / Playwright / …\r\n\r\n### 用例列表\r\n| 场景 | 类型 | 要点 |\r\n|------|------|------|\r\n| … | 单元/组件/集成/E2E | … |\r\n\r\n### Mock 与环境\r\n- 接口：MSW handlers / …\r\n- 路由/时间：…\r\n\r\n### 示例代码（可选）\r\n- 关键 1–2 个用例的代码片段\r\n```\r\n\r\n## 项目相关\r\n\r\n- React：RTL + Jest/Vitest；hooks 用 renderHook；路由用 MemoryRouter\r\n- Vue：Vue Test Utils + Jest/Vitest；Composition API 同 renderHook 思路\r\n- Next.js：可测 App Router 页面用 testing-library；API 用 MSW 或 node mock\r\n- E2E：Playwright 优先（多浏览器、稳定）；选择器优先 role > text > testid\n\nFile v1.0.0:README.md\n\n# Frontend Testing（前端测试）\r\n\r\n设计测试策略并编写单元/组件/集成/E2E 测试，处理 mock 与覆盖率。\r\n\r\n## What It Does\r\n\r\n- 测试分层与工具选型（Jest/Vitest、RTL、Playwright 等）\r\n- 用例设计、Mock 策略、断言与可维护性\r\n- 输出测试方案或示例代码\r\n\r\n## How to Use\r\n\r\n当用户提到「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」或提高覆盖率时启用。\r\n\r\n## Requirements\r\n\r\n- 无额外依赖；按项目已有测试框架给出建议\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7d79fmw28v2we1sjpqk7mpfd829g7s\",\n  \"slug\": \"frontend-testing\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1776668230535\n}\n\nFile v1.0.0:clawhub.json\n\n{\r\n  \"name\": \"Frontend Testing (前端测试)\",\r\n  \"tagline\": \"设计测试策略，编写单元/组件/集成/E2E 测试，处理 mock 与覆盖率\",\r\n  \"description\": \"前端测试技能：测试分层与选型（单元/组件/集成/E2E）、用例设计、Mock 策略、写法与断言、覆盖率与维护。适用于前端测试、单元测试、组件测试、E2E、Jest、Vitest、Testing Library 等场景。\",\r\n  \"category\": \"development\",\r\n  \"tags\": [\"testing\", \"jest\", \"vitest\", \"rtl\", \"e2e\", \"playwright\", \"msw\", \"前端测试\"],\r\n  \"version\": \"1.0.0\",\r\n  \"license\": \"MIT\",\r\n  \"pricing\": \"free\",\r\n  \"support_url\": \"https://github.com/wangzhiming1999/oliver-skill/issues\",\r\n  \"homepage\": \"https://github.com/wangzhiming1999/oliver-skill\"\r\n}","readmeExcerpt":"Skill: Frontend Testing Owner: wangzhiming1999 Summary: Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T06:57:18.225Z | user Publish from oliver-skill repository v1.0.0 | 2026-04-20T06:57:10.535Z | user Publish from oliver-skill repository Archive ind","codeSnippets":[],"executableExamples":[],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\r\nname: frontend-testing\r\ndescription: Designs and writes frontend tests: unit, component, integration, E2E; test structure, mocking, and coverage. Use when 前端测试, 单元测试, 组件测试, E2E, Jest, Vitest, Testing Library, or writing tests.\r\n---\r\n\r\n# 前端测试（Frontend Testing）\r\n\r\n帮助设计测试策略、编写单元/组件/集成/E2E 测试，以及 mock、断言与覆盖率考量。\r\n\r\n## 触发场景\r\n\r\n- 用户说「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」\r\n- 需求「提高覆盖率」「回归不放心」「改完怕坏」\r\n- 已有测试框架，需要补用例或重构测试\r\n\r\n## 测试分层与选型\r\n\r\n| 类型 | 适用 | 常用工具 | 关注点 |\r\n|------|------|----------|--------|\r\n| 单元 | 纯函数、工具、hooks | Jest / Vitest | 输入输出、边界、副作用 |\r\n| 组件 | 组件渲染与交互 | React Testing Library / Vue Test Utils | 用户行为、可访问性、状态 |\r\n| 集成 | 多模块/请求/路由 | Jest+MSW / Vitest+MSW | 流程、接口 mock、错误态 |\r\n| E2E | 关键用户路径 | Playwright / Cypress | 真实浏览器、稳定选择器、环境 |\r\n\r\n## 执行流程\r\n\r\n### 1. 先搞清楚用户要测什么\r\n\r\n| 用户描述 | 实际需求 | 第一步 |\r\n|---------|---------|-------|\r\n| 「写测试」「补测试」 | 不知道从哪里开始 | 问：被测对象是什么（函数/组件/页面流程）？现有测试框架是什么？ |\r\n| 「这个函数怎么测」「这个组件怎么测」 | 具体对象的测试 | 直接读代码，给出用例列表 + 关键用例的代码 |\r\n| 「测试跑不过」「mock 不生效」 | 具体 bug | 看报错信息，定位问题，不要先讲测试理论 |\r\n| 「覆盖率不够」 | 提高覆盖率 | 先问：覆盖率卡在哪个文件/模块？不要盲目追 100% |\r\n| 「用 Jest 还是 Vitest」 | 选型 | 给明确推荐：新项目用 Vitest（更快、ESM 原生支持）；已有 Jest 的项目不要为了换而换 |\r\n\r\n### 2. 拿到被测对象后，按这个顺序设计用例\r\n\r\n**第一步：识别测试类型**\r\n- 纯函数/工具函数 → 单元测试，直接测输入输出\r\n- React/Vue 组件 → 组件测试，用 Testing Library 模拟用户行为\r\n- 涉及接口/路由/多组件协作 → 集成测试，用 MSW mock 接口\r\n- 关键用户路径（登录、下单、支付）→ E2E，用 Playwright\r\n\r\n**第二步：列用例，覆盖这四类场景**\r\n- 正向：主流程能跑通\r\n- 边界：空值、最大值、特殊字符\r\n- 异常：接口失败、权限不足、超时\r\n- 交互：点击、输入、提交、取消（组件测试）\r\n\r\n**第三步：给代码，不要只给用例列表**\r\n\r\n至少给出 1-2 个完整的测试用例代码，包含 mock 设置、断言、cleanup。\r\n\r\n### 3. 遇到这些情况，按以下方式处理\r\n\r\n**用户没有测试框架**\r\n→ 推荐：Vitest + React Testing Library + MSW（接口 mock）+ Playwright（E2E）\r\n→ 给出安装命令和最小配置，不要只说「安装 X」\r\n\r\n**组件测试找不到元素**\r\n→ 优先用 `getByRole`（语义化，最稳定）\r\n→ 其次 `getByLabelText`（表单）、`getByText`\r\n→ 最后才用 `getByTestId`（加 `data-testid`）\r\n→ 不要用 `querySelector`，测试不应该依赖 CSS 类名\r\n\r\n**异步测试不稳定**\r\n→ 用 `waitFor` 等待断言，不要用 `setTimeout`\r\n→ 用 `findBy*` 代替 `getBy*` 处理异步渲染\r\n→ 确保每个测试后清理 mock（`afterEach(() => server.resetHandlers())`）\r\n\r\n**不知道 mock 什么**\r\n→ 只 mock 系统边界：HTTP 请求（MSW）、时间（`vi.setSystemTime`）、环境变量\r\n→ 不要 mock 被测模块内部的函数，那样测的是 mock 不是代码\r\n\r\n### 4. 覆盖率的正确用法\r\n\r\n- 覆盖率是发现**没测到的路径**的工具，不是目标\r\n- 80% 覆盖率但覆盖了核心路径 > 100% 覆盖率但全是无意义的 snapshot\r\n- 看覆盖率报告时，重点看**分支覆盖率**（branch coverage），不是行覆盖率\r\n\r\n## 输出模板\r\n\r\n```markdown\r\n## 测试方案 / 用例说明\r\n\r\n### 范围与工具\r\n- 被测对象：…\r\n- 框架：Jest / Vitest / RTL / Playwright / …\r\n\r\n### 用例列表\r\n| 场景 | 类型 | 要点 |\r\n|------|------|------|\r\n| … | 单元/组件/集成/E2E | … |\r\n\r\n### Mock 与环境\r\n- 接口：MSW handlers / …\r\n- 路由/时间：…\r\n\r\n### 示例代码（可选）\r\n- 关键 1–2 个用例的代码片段\r\n```\r\n\r\n## 项目相关\r\n\r\n- React：RTL + Jest/Vitest；hooks 用 renderHook；路由用 MemoryRouter\r\n- Vue：Vue Test Utils + Jest/Vitest；Composition API 同 renderHook 思路\r\n- Next.js：可测 App Router 页面用 testing-library；API 用 MSW 或 node mock\r\n- E2E：Playwright 优先（多浏览器、稳定）；选择器优先 role > text > testid"},{"path":"README.md","content":"# Frontend Testing（前端测试）\r\n\r\n设计测试策略并编写单元/组件/集成/E2E 测试，处理 mock 与覆盖率。\r\n\r\n## What It Does\r\n\r\n- 测试分层与工具选型（Jest/Vitest、RTL、Playwright 等）\r\n- 用例设计、Mock 策略、断言与可维护性\r\n- 输出测试方案或示例代码\r\n\r\n## How to Use\r\n\r\n当用户提到「写测试」「单元测试」「组件测试」「E2E」「Jest」「Vitest」「Testing Library」或提高覆盖率时启用。\r\n\r\n## Requirements\r\n\r\n- 无额外依赖；按项目已有测试框架给出建议"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7d79fmw28v2we1sjpqk7mpfd829g7s\",\n  \"slug\": \"frontend-testing\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1776668238225\n}"},{"path":"skill-card.md","content":"## Description:\n\nDesigns frontend unit, component, integration, and E2E testing strategies and examples, including test structure, mocking, assertions, and coverage guidance.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[wangzhiming1999](https://clawhub.ai/user/wangzhiming1999)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to plan frontend test coverage, choose suitable testing tools, and draft test plans, mocks, assertions, configuration, shell commands, and representative Jest, Vitest, Testing Library, MSW, Playwright, or Cypress examples.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Broad trigger wording may activate the skill for generic testing or coverage requests that are not frontend-specific.\n\nMitigation: Confirm the target code, framework, and testing scope before applying frontend-specific testing guidance.\n\nRisk: Generated test code, configuration, or shell commands may not match the project's existing framework setup.\n\nMitigation: Review proposed code and commands against the repository's package manager, test runner, mocks, and CI configuration before use.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/wangzhiming1999/skills/frontend-testing)\n- [ClawHub Publisher Profile](https://clawhub.ai/user/wangzhiming1999)\n- [Skill README](artifact/README.md)\n- [Skill Instructions](artifact/SKILL.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown with test plans, tables, inline shell commands, and code blocks]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include framework-specific setup, mock strategy, assertions, coverage guidance, and one or two complete example test cases.]\n\n## Skill Version(s):\n\n1.0.1 (source: ClawHub release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."},{"path":"clawhub.json","content":"{\r\n  \"name\": \"Frontend Testing (前端测试)\",\r\n  \"tagline\": \"设计测试策略，编写单元/组件/集成/E2E 测试，处理 mock 与覆盖率\",\r\n  \"description\": \"前端测试技能：测试分层与选型（单元/组件/集成/E2E）、用例设计、Mock 策略、写法与断言、覆盖率与维护。适用于前端测试、单元测试、组件测试、E2E、Jest、Vitest、Testing Library 等场景。\",\r\n  \"category\": \"development\",\r\n  \"tags\": [\"testing\", \"jest\", \"vitest\", \"rtl\", \"e2e\", \"playwright\", \"msw\", \"前端测试\"],\r\n  \"version\": \"1.0.0\",\r\n  \"license\": \"MIT\",\r\n  \"pricing\": \"free\",\r\n  \"support_url\": \"https://github.com/wangzhiming1999/oliver-skill/issues\",\r\n  \"homepage\": \"https://github.com/wangzhiming1999/oliver-skill\"\r\n}"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons... Skill: Frontend Testing Owner: wangzhiming1999 Summary: Designs and writes frontend unit, component, integration, and E2E tests using Jest, Vitest, Testing Library, MSW, and Playwright with mocks and coverage cons... Tags: latest:1.0.1 Version history: v1.0.1 | 2026-04-20T06:57:18.225Z | user Publish from oliver-skill repository v1.0.0 | 2026-04-20T06:57:10.535Z | user Publish from oliver-skill repository Archive ind","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":864,"uniquenessScore":52,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T07:24:51.410Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T10:43:12.642Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}