SuperAPI AI 工具集

async-component-test

测试与质量

查看项目

更新于 10-16 06:18

技能介绍

用途:为具有异步数据生命周期的 UI 组件生成测试,覆盖加载、成功、错误和重试四种状态,避免计时 hack 与 act() 警告。默认面向 React + Testing Library,也适用于 Vue 等框架。

主要能力:先做发现,确认框架、数据获取机制(useEffect+fetch、React Query、SWR、Apollo 或服务端组件)、测试运行器(Jest+jsdom 或 Vitest)、请求拦截方式(jest.mock、msw、jest.spyOn(global,'fetch'))、是否有重试交互、是否包裹 Suspense。默认推荐 msw,因其在网络层拦截、最不脆弱。

使用方式:加载态需延迟响应以断言 spinner 出现;成功态用 findBy 等待首个异步断言,后续用 getBy,并断言 spinner 消失;错误态用 HttpResponse.error() 模拟网络失败,用 HttpResponse.json(..., {status:500}) 测 HTTP 错误码;重试态用 userEvent.click 触发并断言错误清除。msw 需在 afterEach 调用 server.resetHandlers(),并设置 onUnhandledRequest:'error'。

限制与注意:不要将 findBy 嵌套在 waitFor 内造成双重轮询;交互优先用 userEvent 而非 fireEvent;若组件内部已有 Suspense,测试中不要重复包裹;Vitest 与 Jest 的 Testing Library API 相同,仅运行器配置不同。资料未提供具体安装命令、版本要求或收费信息。