防抖与节流单元测试需验证调用次数、延迟时机、参数/this转发、清除重置四类行为，须用jest.usefaketimers()模拟时间，覆盖高频调用、零延迟、嵌套装饰、异常抛错等边界场景，并辅以时间戳日志快照比对。
防抖与节流的单元测试，核心是验证「时间行为」和「调用逻辑」是否符合预期：防抖要确认它只在静默期结束后执行最后一次调用；节流要确认它在固定间隔内最多执行一次，且能正确转发参数和 this 上下文。不能只测“有没有调用”，而要测“什么时候调用、调用了几次、传了什么、上下文对不对”。
关键测试维度必须覆盖
写测试前先明确要验证的四类行为：
-
调用次数控制：比如
throttle(f, 100)在 250ms 内被调用 5 次，应只执行 2 次（0ms 和 ≥100ms 后的第一次） -
延迟时机准确性：比如
debounce(f, 200)连续触发后，函数应在最后一次触发后恰好 200ms 执行（允许少量误差，如 ±5ms） -
参数与 this 转发完整性：包装函数接收的参数、调用时的
this，必须原样传给原始函数 - 清除与重置行为：防抖中重复触发应清除旧定时器；节流中时间戳或状态需及时更新，避免漏判或误判
用 Jest 模拟时间做精准断言
真实等待毫秒级时间会导致测试慢且不稳定。必须使用 jest.useFakeTimers() 控制时间流：
- 调用
jest.runAllTimers()快进所有待执行定时器 - 用
jest.advanceTimersByTime(ms)精确推进指定毫秒，观察中间状态 - 配合
mockFn.mock.calls记录每次调用的参数和上下文
示例节流测试片段：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
const throttled = throttle(f, 100);
throttled(1); // t=0
jest.advanceTimersByTime(50);
throttled(2); // t=50，不执行
jest.advanceTimersByTime(60); // t=110，执行第2次
expect(f).toHaveBeenCalledTimes(2);
expect(f).toHaveBeenNthCalledWith(1, 1);
expect(f).toHaveBeenNthCalledWith(2, 2);
覆盖边界与异常场景
容易忽略但实际高频出问题的情况，必须单独写测试：
- 连续高频调用（如 10 次/10ms），验证节流是否稳定限频、防抖是否真正合并
- 零延迟或负延迟输入（
throttle(f, 0)），检查是否退化为直接调用或报错 - 装饰器被多次嵌套（
throttle(debounce(f, 100), 200)），确认行为可组合 - 函数抛错后，定时器是否仍正常清理（避免内存泄漏）
- 在定时器运行中手动
clearTimeout或销毁包装函数，验证无未处理异常
对比快照与行为日志辅助调试
对复杂时序逻辑，光靠断言难定位问题。建议加一层行为日志：
- 让被包装函数返回当前时间戳或序列号：
f.mockImplementation(() => Date.now()) - 收集所有调用时间点，生成执行序列快照，例如：
[0, 100, 200, 300] - 用
expect(log).toEqual([0, 100, 200])直接比对时间点，比查 call count 更直观
这种日志式断言在 CI 环境中失败时，能一眼看出是延迟偏长、漏执行，还是提前触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
