JS 中异步代码测试、Mock模拟、代码覆盖率与浏览器调试全景复习指南怎么学-js教程-PHP中文网

学好js异步测试、mock、覆盖率和浏览器调试的关键是建立“问题驱动”的闭环能力：能定位异步卡顿原因、快速搭建可信接口模拟、根据覆盖率红区反推缺失分支、通过devtools还原压缩代码报错现场。

js 中异步代码测试、mock模拟、代码覆盖率与浏览器调试全景复习指南怎么学

学好 JS 异步测试、Mock 模拟、覆盖率和浏览器调试，关键不是堆知识点，而是建立“问题驱动”的闭环能力：遇到异步逻辑卡住，能快速定位是时机不对、状态没清、还是依赖没控；接口还没通时，能立刻搭出可信模拟；跑完测试发现覆盖率红了，知道哪条分支漏了、为什么没走到；线上报错只有一行压缩代码，也能在 DevTools 里顺藤摸瓜还原现场。

异步边界测试要盯住四个“临界点”

别只测 await fetch() 成功返回，重点验证它“失常”时系统是否稳：

用 jest.fn().mockImplementation(() => new Promise(() => {})) 模拟永远 pending 的请求，检查 loading 状态是否卡死、abort 是否生效
手动调用 controller.abort() 后，断言 fetch 的 mock.calls.length 为 0，确认回调被真正拦截
发两个请求：第一个延迟 300ms，第二个延迟 100ms，验证 UI 最终只渲染第二个结果（竞态处理）
设超时为 50ms，mock reject 带 'Timeout' 错误，确保 catch 块里的错误提示、重试按钮显隐逻辑全执行

Mock 不是造数据，是控行为

真正有用的 Mock 能回答三个问题：它被调用了么？传的啥参数？返回了什么？

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

函数级：用 jest.fn().mockResolvedValue({id: 1}) 替换 API 调用，再用 expect(api).toHaveBeenCalledWith('user/123') 校验入参
模块级：对 import { auth } from './auth'，用 jest.mock('./auth', () => ({ auth: jest.fn() })) 隔离登录态，避免测试受 localStorage 影响
副作用清理：每个 test 后加 jest.clearAllMocks()，防止上一个测试 mock 的返回值污染下一个
不 mock 真实会执行的副作用——比如 mock 了 fetch 却没 mock setTimeout，异步流程就测不全

覆盖率不是凑数字，是找盲区

打开 coverage/lcov-report/index.html，红色行就是你没触达的逻辑分支：

if 判断：必须同时写 true 和 false 的用例，比如参数为空字符串、为 null、为有效值三种情况
early return：模拟抛错或 reject，让代码走到 return 前就退出，覆盖提前终止路径
try/catch：mockRejectedValue 触发 catch，mockImplementation(() => { throw new Error() }) 触发同步异常
运行 npx jest --collectCoverageFrom="src/hooks/**/*.{js,ts}" 只看关心模块，避免被无关文件干扰