用途:为 React Web 应用编写与调试测试,覆盖组件渲染、用户交互与异步状态管理,使用 Jest 搭配 React Testing Library。
主要能力(模式):Zustand 存储测试(用 setState(initialState, true) 重置并替换状态,用 getState() 读取最新状态);异步存储操作(用 act 包裹异步 action,用 waitFor 校验结果);组件测试(render、screen、userEvent,断言展示数据、点击回调与加载状态);React Query 测试(自建 QueryClient,设置 retry: false、gcTime: 0,用 QueryClientProvider 包装);自定义 Hook 测试(renderHook 配合 act/waitFor,Hook 依赖 Context 时传 wrapper);API mock(mock fetch 与 jest.mock 模块);路由测试(MemoryRouter 与 initialEntries,测试跳转与路由参数);表单测试(输入、提交、校验错误、加载时禁用按钮);避免 act() 警告(用 waitFor 或 findBy* 等待异步完成);快照测试(适合结构稳定的 UI 与设计系统组件,避免动态内容与大组件树);Context Provider 测试(统一 wrapper 注入多个 Provider)。
使用方式:按项目实际配置运行 npm test;常用命令包括 npm test、npm test -- --watch、npm test -- --coverage、npm test -- Button、npm test -- --updateSnapshot、npm test -- --runInBand。
限制与注意:需自行配置 Jest(如 moduleNameMapper)与全局 mock;store 状态在测试间会残留,应加 beforeEach 重置;异步测试超时需检查挂起 Promise 或调大超时;mock 路径必须与 import 路径完全一致;查询失败时对异步内容改用 findBy* 并检查可访问性。官方文档仅给出推荐目录结构(tests/utils 下的 test-utils.tsx、query-test-utils.tsx,以及 jest.setup.js、jest.config.js),其余安装与版本要求暂未提供。