用途
本技能提供前端测试的最佳实践指南，旨在帮助开发者编写有效且可维护的测试，从而获得真实的信心。它包含 6 条规则，重点在于优先选择 E2E 测试、尽量减少 mocking，以及测试行为而非实现细节。
核心哲学
- 优先选择 E2E 测试而非单元测试——测试整个系统，而非孤立的片段。
- 尽量减少 mocking——如果需要复杂的 mock，应改为编写 E2E 测试。
- 测试行为，而非实现——测试用户看到和做的事情。
- 避免直接测试 React 组件——通过 E2E 进行测试。
何时应用
在以下情况下参考这些指南：
- 决定要编写哪种类型的测试时
- 编写新的 E2E 或单元测试时
- 审查测试代码时
- 重构测试时
规则摘要
测试策略（关键）
-
prefer-e2e-tests（@rules/prefer-e2e-tests.md） 默认使用 E2E 测试。仅对纯函数编写单元测试。 示例展示了一个 E2E 测试（首选）测试真实用户流程，以及一个仅针对纯函数的单元测试。
-
avoid-component-tests（@rules/avoid-component-tests.md） 不要对 React 组件进行单元测试。通过 E2E 测试它们，或者根本不测试。 示例对比了不好的组件单元测试和好的 E2E 测试自然覆盖组件的情况。
-
minimize-mocking（@rules/minimize-mocking.md） 保持 mock 简单。如果需要 3 个或更多 mock，请改为编写 E2E 测试。 示例对比了过多 mock（应写 E2E）和简单 MSW mock 用于 loader 测试的情况。
E2E 测试（高优先级）
-
e2e-test-structure（@rules/e2e-test-structure.md） E2E 测试放在 e2e/tests/ 目录下，而不是 frontend/。 示例展示了一个 Playwright 测试文件的结构，包括导入工具函数、beforeEach 设置、测试用例等。
-
e2e-selectors（@rules/e2e-selectors.md） 使用可访问的选择器：role > label > text > testid。 示例展示了基于角色的选择器（首选）、基于标签的选择器、在没有可访问选择器时使用 testid（可以），以及 CSS 选择器（不好）。
单元测试（中优先级）
- unit-test-structure（@rules/unit-test-structure.md） 单元测试仅针对纯函数。与源文件放在一起。 示例展示了一个格式化货币函数的单元测试文件结构。
关键文件
- e2e/tests/ - E2E 测试（Playwright）
- e2e/tests/utils.ts - E2E 测试工具
- vitest.config.ts - 单元测试配置
- vitest.setup.ts - 全局测试设置，包含 MSW
- app/utils/test-utils.ts - 单元测试工具
适用场景和限制
该技能适用于前端项目，尤其是使用 React 和 Playwright 的项目。它强调 E2E 测试优先，适用于需要确保用户流程正确性的场景。限制在于它主要针对前端测试策略，不涉及后端测试或其他类型的测试。具体实现细节和配置可能因项目而异。