SuperAPI AI 工具集

react-testing-library

前端与建站

查看项目

更新于 10-16 08:07

技能介绍

用途:本技能帮助开发者掌握 React Testing Library(RTL),编写关注用户行为而非实现细节的可维护组件测试。学习目标包括编写组件测试、测试用户交互、处理异步操作、测试 Hook 与 Context,并遵循测试最佳实践。

安装:npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

主要能力:以可访问性优先的查询(getByRole、getByLabelText、getByPlaceholderText、getByText、getByAltText、getByTitle,最后才是 getByTestId);区分 getBy(找不到即抛错)、queryBy(找不到返回 null,用于断言不存在)、findBy(异步等待元素)。可用 userEvent 模拟真实交互测试表单提交与校验错误。支持异步操作测试,推荐使用 MSW(含 2.0 版本的 http、HttpResponse 写法)模拟接口成功与错误响应。支持用 renderHook 与 act 测试 Hook,用 Provider 包裹测试 Context,并可封装自定义 render 统一注入路由与主题等 Provider。

常用做法:用 waitFor 等待加载消失或列表项数量,用 screen.debug 打印 DOM,用 logTestingPlaygroundURL 获取调试链接。可配置 Jest 的 collectCoverageFrom 与 coverageThreshold(分支、函数、行、语句各 80)以及重试和超时以减少不稳定测试。

适用场景:React 组件、表单、异步数据获取、Hook、Context、路由与模态等交互测试。

限制:资料标注难度为中级,预估学习时间 2-3 周,前置要求为 React 基础与 Jest 基础;未提供收费、价格或平台信息。