# 使用 DOM 测试库进行前端测试用于行为驱动测试的与框架无关的 DOM 测试库模式。对于 React 特定的模式（renderHook、上下文、组件），加载“react-testing”技能。对于 TDD 工作流程 (RED-GREEN-REFACTOR)，加载“tdd”技能。 ## 核心理念 **测试用户看到的行为，而不是实现细节。** 测试库的存在是为了解决一个基本问题：重构时中断的测试（误报）和存在错误时通过的测试（误报）。 ### 两种类型的用户您的 UI 组件有两个用户： 1. **最终用户**：通过 DOM 进行交互（点击、键入、阅读文本） 2. **开发人员**：你，重构实现 **Kent C. Dodds 原则**：“您的测试与软件的使用方式越相似，它们就越能给您带来信心。” ### 为什么这很重要 **漏报**（重构时测试中断）： // ❌ 错误 - 测试实现（将在重构时中断） it("应该更新内部状态", () => { const 组件 = new CounterComponent(); 组件.setState({ 计数: 5 }); // 与状态实现耦合期望（组件.状态.计数）.toBe（5）; }); **正确方法**（行为驱动）： // ✅ 正确 - 测试用户可见的行为 it("当用户点击提交时应该提交表单", async () => { const handleSubmit = vi.fn(); const user = userEvent.setup(); 渲染（` <表单id =“登录表单”> 电子邮件： `); 等待 user.type(screen.getByLabelText(/email/i), "test@example.com"); 等待 user.click(screen.getByRole("button", { name: /submit/i })); 期望(handleSubmit).toHaveBeenCalled(); }); ## 快速参考主题 |指南 ---|--- 查询选择优先级及详情 | [queries.md]() userEvent 模式和交互 | [user-events.md]() 异步测试（findBy、waitFor）| [async-testing.md]() 用于 API 模拟的 MSW | [msw.md]() 常见错误和修复| [反模式.md]() 可访问性优先的测试原则 | [accessibility-first-testing.md]() ## 何时使用每个指南 ### 查询当您需要时，请使用 [queries.md]()： * 查询优先级顺序 (getByRole → getByLabelText → ...) * 查询变体决策（getBy vs queryBy vs findBy） * 常见查询错误及修复 ### 用户事件当您需要时，请使用 [user-events.md]()： * userEvent 与 fireEvent 指南 * userEvent.setup() 模式 * 常见的交互模式（点击、打字、键盘） ### 异步测试当您需要时，请使用 [async-testing.md]()： * findBy 查询异步元素 * waitFor 复杂条件 * 等待元素被删除 * 加载状态、API 响应、去抖输入 ### 城市固体废弃物当您需要时，请使用 [msw.md]()： * 网络级API模拟 * 设置服务器模式 * 每个测试处理程序覆盖 ### 反模式当您需要时，请使用 [anti-patterns.md]()： * 所有常见错误的列表 * 不该做什么的快速参考 * ESLint插件设置 ### 可访问性优先测试当您需要时，请使用 [accessibility-first-testing.md]()： * 为什么可访问的查询可以改善测试和可访问性 * 何时添加 ARIA 属性与语义 HTML * HTML语义优先原则 ## 摘要清单在合并 UI 测试之前，请验证： * 使用`getByRole`作为查询的首选 * 将“userEvent”与“setup()”一起使用（不是“fireEvent”） * 对所有查询使用“screen”对象（不从渲染中解构） * 对异步元素使用 `findBy*`（加载、API 响应） * 使用 `jest-dom` 匹配器（`toBeInTheDocument`、`toBeDisabled` 等） * 测试用户看到的行为，而不是实现细节 * 安装了 ESLint 插件（`eslint-plugin-testing-library`、`eslint-plugin-jest-dom`） * 没有手动 `cleanup()` 调用（自动） * MSW 用于 API 模拟（不是 fetch/axios 模拟） * 遵循 TDD 工作流程（参见 `tdd` 技能） * 使用测试工厂获取数据（参见“测试”技巧） * 对于特定于框架的模式（React hooks、上下文、组件），请参阅“react-testing”技能

前端测试

包含技能