javascript - Jest react 测试 : Check state after delay

Question

在 Jest 文档的帮助下尝试创建测试时我真的很困惑 https://facebook.github.io/jest/docs/timer-mocks.html#content

我正在尝试检查容器安装时的状态，然后几秒钟后，在我手动设置状态中的值(使用 setTimeout())之后。

我在 Main 的 componentDidMount 中有一个这样的函数:

componentDidMount() {
    this.setStateAfterDelay();
}

函数的作用是:

setStateAfterDelay = () => {
    setTimeout(() => {
        this.setState({ fruits: ['banana', 'apple', 'orange', 'vodka', 'kiwi'] });
    }, 1500);
}

我完成了第一部分:

const component = mount(<Main />);
expect(component.state().fruits).toEqual(null);

但我不知道如何在 2000 毫秒之后再次检查状态？

感谢任何帮助:)

Answer 1

虽然 jest 可以轻松运行异步代码，但您可以使用 promise 和 setTimeout 组合稍等片刻。例如，此代码将等待 2 秒:

await new Promise((r) => setTimeout(r, 2000));

全样本测试。不要忘记在回调函数之前添加 async 标志:

test('some test title', async () => {
  const foo = true;
  await new Promise((r) => setTimeout(r, 2000));
  expect(foo).toBeDefined();
});

另外，请记住默认的“超时”是 5 秒(5000 毫秒)。如果您的测试运行时间更长，您可以在 test() 上方添加 jest.setTimeout(30000);。 30000 将确保不会超时 30 秒。您可以添加任何您需要的号码。 setTimeout 的完整示例:

jest.setTimeout(30000);

test('some test title', async () => {
  const foo = true;
  await new Promise((r) => setTimeout(r, 2000));
  expect(foo).toBeDefined();
});