JS 中防抖与节流单元测试怎么用 Jest 编写-js教程-PHP中文网

Jest测试防抖节流需用jest.useFakeTimers()控制时间，防抖验证延迟执行与重置，节流验证固定间隔执行；均通过jest.fn()模拟函数并断言调用次数、参数及时机。

js 中防抖与节流单元测试怎么用 jest 编写

用 Jest 编写防抖（debounce）和节流（throttle）的单元测试，核心是控制时间、模拟函数调用、验证执行次数与时机。关键在于：用 jest.useFakeTimers() 替代真实定时器，配合 jest.runAllTimers() 或 jest.advanceTimersByTime() 主动推进时间，再断言函数是否被调用、调用几次、参数是否正确。

一、准备可测试的防抖与节流函数

先确保你有标准实现（以闭包 + 定时器为基础），并导出供测试使用：

utils.js

export function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
<p>export function throttle(fn, delay) {
let lastCall = 0;
return function (...args) {
const now = Date.now();
if (now - lastCall >= delay) {
fn(...args);
lastCall = now;
}
};
}</p>

二、Jest 防抖测试要点（验证“延迟执行”与“重置”）

防抖测试要覆盖：多次调用只触发最后一次；中间调用被取消；delay 到期后准确执行。

启用假定时器：jest.useFakeTimers()
用 jest.fn() 创建被包装函数，便于断言
连续调用防抖函数，不立即执行；调用 jest.advanceTimersByTime(delay) 后应只执行一次
在 delay 内反复调用，再推进时间，仍只执行最后一次传参

utils.test.js

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

import { debounce } from './utils';
<p>describe('debounce', () => {
beforeEach(() => {
jest.useFakeTimers();
});</p><p>afterEach(() => {
jest.clearAllTimers();
});</p><p>test('should call fn only once after delay', () => {
const fn = jest.fn();
const debounced = debounce(fn, 100);</p><pre class="brush:php;toolbar:false;">debounced('a');
debounced('b');
debounced('c');

expect(fn).not.toHaveBeenCalled();

jest.advanceTimersByTime(100);
expect(fn).toHaveBeenCalledTimes(1);
expect(fn).toHaveBeenCalledWith('c'); // 最后一次参数

}); });

三、Jest 节流测试要点（验证“固定间隔执行”）

节流测试重点是：首次调用立即执行；后续调用在间隔外才执行；间隔内调用被忽略（不累积）。

节流不依赖定时器延时，所以 useFakeTimers 不是必须，但可用 Date.now mock 精确控制时间戳
更推荐用 jest.setSystemTime() 模拟时间推进（Jest 27+），或直接 mock Date.now
验证：t=0 执行 → t=49 不执行 → t=100 执行 → t=149 不执行 → t=200 执行

示例（mock Date.now）：

import { throttle } from './utils';
<p>describe('throttle', () => {
test('should execute fn at most once per delay', () => {
const fn = jest.fn();
const throttled = throttle(fn, 100);</p><pre class="brush:php;toolbar:false;">// t = 0
Date.now = jest.fn().mockReturnValue(0);
throttled('x');
expect(fn).toHaveBeenCalledTimes(1);
expect(fn).toHaveBeenCalledWith('x');

// t = 49 → no call
Date.now.mockReturnValue(49);
throttled('y');
expect(fn).toHaveBeenCalledTimes(1);

// t = 100 → call again
Date.now.mockReturnValue(100);
throttled('z');
expect(fn).toHaveBeenCalledTimes(2);
expect(fn).toHaveBeenLastCalledWith('z');

}); });