让单元测试等待异步获取填充的数据

Question

useSWR我有一个单元测试，其中包括渲染用于获取数据的组件。但在调用之前数据尚未准备好，expect()因此测试失败。

test("StyleOptionDetails contains correct style option number", () => {
    renderWithMockSwr(
        <StyleOptionDetails
            {...mockIStyleOptionDetailsProps}
        />
    )
    expect(screen.getByText(123)).toBeInTheDocument();
});

但如果我延迟setTimeout()，它就会通过测试。

setTimeout(() => {
    console.log('This will run after 2 second')
    expect(screen.getByText(123)).toBeInTheDocument();
}, 2000);

创建延迟或等待数据的正确方法是什么？

Answer 1

我在其他地方对 ReactJS 问题Web Fetch API（等待获取完成然后执行下一条指令）有类似的答案。让我为您的问题提出解决方案。

如果您的函数renderWithMockSwr()是异步的，那么如果您希望它在调用下一行之前等待完成执行，请使用该await命令。

await renderWithMockSwr(
    <StyleOptionDetails
        {...mockIStyleOptionDetailsProps}
    />
)

async太棒了。亦是如此await。查看：Mozilla 开发者网络：异步函数