如何测试需多次调用useEffect的自定义React节流Hook？

你没法直接获取useThrottleEffect内部的useEffect引用，但可以通过触发依赖更新来模拟内部effect的多次执行，同时结合Jest的时间模拟工具验证节流逻辑。以下是具体解决方案：

1. 利用renderHook的rerender方法触发内部effect #

@testing-library/react-hooks的renderHook返回对象包含rerender方法，调用它可重新执行Hook，进而触发内部useEffect（当依赖变化时）。你可以通过修改传入Hook的依赖项，强制触发内部effect执行。

2. 用Jest模拟时间推进验证节流 #

使用Jest的jest.useFakeTimers()替换原生定时器，再通过jest.advanceTimersByTime()模拟时间流逝，就能验证节流逻辑是否在指定延迟后才允许再次执行回调。

完整测试代码示例 #

import { renderHook } from '@testing-library/react-hooks';
import { useThrottleEffect } from './useThrottleEffect';

describe('useThrottleEffect', () => {
  let callback;

  beforeEach(() => {
    callback = jest.fn();
    jest.useFakeTimers(); // 启用假定时器
  });

  afterEach(() => {
    jest.useRealTimers(); // 恢复真实定时器
    jest.clearAllMocks();
  });

  test('首次调用立即执行回调', () => {
    renderHook(() => useThrottleEffect(callback, [], 1000));
    expect(callback).toHaveBeenCalledTimes(1);
  });

  test('短时间内重复触发依赖，回调仅执行一次', () => {
    const { rerender } = renderHook(deps => useThrottleEffect(callback, deps, 1000), {
      initialProps: [1]
    });

    // 第一次触发，回调执行
    expect(callback).toHaveBeenCalledTimes(1);

    // 立即更新依赖，触发内部effect
    rerender([2]);
    // 未到延迟时间，回调不执行
    expect(callback).toHaveBeenCalledTimes(1);
  });

  test('超过延迟时间后触发依赖，回调再次执行', () => {
    const { rerender } = renderHook(deps => useThrottleEffect(callback, deps, 1000), {
      initialProps: [1]
    });

    expect(callback).toHaveBeenCalledTimes(1);

    // 推进时间1000ms，到达节流延迟阈值
    jest.advanceTimersByTime(1000);

    // 更新依赖触发内部effect
    rerender([2]);
    // 回调再次执行
    expect(callback).toHaveBeenCalledTimes(2);
  });
});

补充说明 #

• 你的useThrottleEffect实现中，依赖数组使用了[...deps, delay]，所以任何依赖项或delay变化都会触发内部effect执行。
• 测试中通过rerender传入不同的依赖数组，模拟组件更新导致Hook重新执行的场景，进而触发内部的useEffect。
• 时间模拟确保我们能精准控制节流的时间窗口，验证节流逻辑的正确性。

内容的提问来源于stack exchange，提问作者Vladyn