javascript - Jest 模拟 setTimeout

Question

我有一个用 React.JS 制作的网站，它不断为正在发生的所有事情 [and nothing] 发出事件。例如，用户在表单中键入内容，发出一个事件。用户将焦点放在一个字段上并且一段时间不做任何事情，我们再次发出一个事件。这个想法是为了了解客户的行为。

我有一个以前用作 <Button onClick={(e)=>handler(e)}/> 的按钮.我不得不去抖动按钮并将其更改为 <Button onClick={(e)=>setTimeout(handler(e), 1000)}/> .否则，用户不明白发生了什么。

现在，我正在尝试将测试调整为:

  it('displays similar listings', async () => {
    const renderResult = renderVdp(renderParams);

    await new Promise((resolve) => setTimeout(resolve, 1000));
    await waitFor(async () => {
      expect(renderResult.getAllByText('2017 BMW M3')).toHaveLength(4);
    });
  });

我能够通过添加 await new Promise((resolve) => setTimeout(resolve, 1000)); 来保持原始测试的工作。在进行相关测试之前。没有它，测试会收到下一个发出的事件，这不是作为对单击按钮的响应而发出的事件。

我想使用 Jest 计时器模拟或类似的东西，而不是在我的测试中实际引入延迟。我试过使用 jest.useFakeTimers() ，但它不能按我的需要工作。我的期望落空了。

建议？

Answer 1

一旦您使用假定时器，您就可以控制何时运行它们。渲染后尝试运行它们:

it('displays similar listings', async () => {
    jest.useFakeTimers()
    const renderResult = renderVdp(renderParams);
    jest.runAllTimers();
    expect(renderResult.getAllByText('2017 BMW M3')).toHaveLength(4);
  });

如果这不起作用，您始终可以使用更“激进”的模拟:

global.setTimeout = jest.fn(cb => cb());

我会在测试设置 beforeEach/beforeAll 中执行此操作，并在测试拆卸 afterEach/afterAll 中回滚到原始 setTimeout