前端测试应主动构造并派发可控异步事件，mock异步源、分阶段断言状态流转，并验证取消与清理逻辑是否生效。
前端开发中模拟触发 JavaScript 异步事件，关键不是“等它发生”，而是**主动构造并派发可控的异步行为**，让测试能精准断言中间状态、竞态响应和清理逻辑。真实用户点击、输入或网络响应不可控，但测试必须可重复、可预测。
用 dispatchEvent 模拟带异步语义的原生事件
很多 DOM 事件本身不异步，但绑定的处理函数常含异步逻辑（如点击后调用 fetch）。此时需确保事件被正确派发，并验证后续异步流程是否按预期启动：
- 创建标准事件对象，如
new MouseEvent('click', { bubbles: true })或new InputEvent('input', { data: 'abc' }) - 确保目标元素已挂载、事件监听器已注册（React 中注意用
act包裹） - 调用
element.dispatchEvent(event)后，不立即断言最终结果，而是用waitFor等待异步副作用完成
对异步操作本身做可控 mock，而非依赖事件触发时机
真正需要测试的，往往不是“事件有没有发出去”，而是“事件触发后，异步请求是否发出、是否被取消、是否正确更新状态”。因此应隔离真实异步源：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 用 Jest mock 替换
fetch或axios，返回延迟 resolve/reject 的 Promise - 模拟超时：返回
new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 30)) - 模拟竞态：先发一个慢请求（200ms），再发一个快请求（50ms），验证慢请求回调未执行
验证异步生命周期与状态流转
一次点击引发的异步链，通常伴随明确的状态变化。测试要覆盖完整路径，不能只看“最后 UI 对不对”：
立即学习“Java免费学习笔记（深入）”；
- 初始：loading = false, data = null, error = null
- 事件触发后同步更新：loading = true（立即响应，非异步）
- 成功后：loading = false, data = xxx, error = null
- 失败后：loading = false, data = null, error = new Error(...)
- 使用
await waitFor(() => expect(...).toBe(...))分阶段断言，避免断言过早
特别注意取消与清理逻辑
现代异步 API（如 AbortController）要求显式中断。测试必须验证取消是否真正生效：
- 在组件挂载后手动调用
abortController.abort() - 检查 state 是否未被错误更新（如 setState 不该再执行）
- 确认副作用已清理：定时器被
clearTimeout、事件监听器被removeEventListener、资源被释放 - React 中结合
unmount+act验证卸载后无内存泄漏
