掌握js单元测试高级技巧关键在“隔离、行为、可读”三支点：精准模拟依赖、可靠验证异步逻辑、贴近用户行为测试ui组件，并以aaa结构保障可读性。
掌握 JS 单元测试高级进阶技巧，关键不在框架堆砌，而在理解“隔离、行为、可读”三个支点。真正拉开水平差距的，不是会不会写 expect().toBe()，而是能否在复杂依赖、异步边界、UI 交互等场景下，让测试既稳定又表意清晰。
精准模拟外部依赖
真实项目中，函数常调用 API、读取 localStorage、访问 Date 或 Math.random()。不加控制地运行，测试会因时间、网络、随机性而飘红。
- 用
vi.mock()（Vitest）或jest.mock()替换整个模块，返回可控数据，比如把fetch模拟成返回固定 JSON 的 Promise - 对非模块级副作用（如
Date.now()），在beforeEach中用vi.setSystemTime()锁定时间戳，避免“今天 vs 明天”的断言失败 - mock 后务必清理：调用
vi.clearAllMocks()或jest.clearAllMocks()，防止测试间状态污染
可靠验证异步逻辑
异步不是加个 async/await 就算测对了。重点是验证“行为时机”和“状态流转”，而非单纯等结果。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 对于 Promise 返回函数，直接
await调用后断言最终状态；若涉及 loading/error 状态切换，需配合waitFor（Vitest）或waitForExpect（Jest）等待 DOM 或响应式数据更新 - 定时器（
setTimeout、setInterval）必须用vi.useFakeTimers()控制时间流，否则测试会变慢甚至超时 - 避免
setTimeout(() => { expect(...); }, 0)这类不可靠写法——它依赖事件循环时机，不稳定
让 UI 组件测试真正反映用户行为
组件不只是“能渲染”，更要验证“用户操作后发生了什么”。浅层挂载（shallowMount）已不够，需逼近真实交互链路。
- 触发事件后，不只检查 emit，还要看后续副作用：比如点击按钮是否调用了 mock 的 API、是否更新了 computed 属性、是否改变了 class 列表
- 对于拖拽、拖放类交互（如 gridstack.js），需模拟完整事件序列（
mousedown→mousemove→mouseup），并结合getCellFromPixel等工具方法校验坐标映射逻辑 - 避免断言实现细节（如内部 ref 名、未导出方法），专注可观察行为：DOM 变化、发出的事件、调用的依赖函数
用 AAA 结构守住测试可读性
再高级的技巧，如果别人看不懂这个测试到底在验证什么，就失去了意义。AAA（Arrange-Act-Assert）不是教条，而是降低认知负荷的底线。
- Arrange 阶段只做准备：创建实例、设置 props、mock 依赖、初始化状态
- Act 阶段尽量单行：调用一个方法、触发一个事件、执行一个函数
- Assert 阶段聚焦“可观测结果”：DOM 文本、emit 内容、mock 调用次数与参数、返回值、抛出错误类型
- 每个测试只验证一个核心行为，命名直述意图，例如
it('disables submit button when form is invalid'，而非it('test case 3'）
