WaitForNextUpdate of renderHook of react测试库超时
WaitForNextUpdate of renderHook of react测试库超时
提问于 2022-02-11 17:27:54
我是Simone，我想开始这个线程，感谢这个社区为开发人员提供了非常有用的帮助(在我的例子中)。我在这里找到了我所有问题的答案，但现在我需要问一些说明性的问题。
我正在用react-testing-library测试一个自定义钩子。关于钩子，您需要知道的是，这是一个简单的钩子，基本上是这样做的：
function useHook() {
const [state, setState] = useState();
const fetch = async () => {
const response = await httpCall();
if (instanceof response !== Error) {
setState("GOOD")
} else {
setState("BAD")
}
}
return { state, fetch }
}我的测试文件是这样的：
it("test", async () => {
const { result, waitForNextUpdate } = renderHooks(() => useHook())
await result.current.fetch();
expect(result.current.state).toBe(undefined)
await waitForNextUpdate();
expect(result.current.state).toBe("GOOD") //or at least "BAD"
})我之所以写这篇文章，是因为我调用了异步函数fetch() (应该触发setState )，我断言还没有发生任何重发事件，然后为了等待这个重命名器，我断言由钩子返回的state现在有一个值"GOOD"或"BAD"。
我的问题是，我的测试给了我一个错误：Timeout - Async callback was not invoked within the 5000 ms ...，这个错误发生在测试等待waitForNextUpdate()时。
我不知道我的测试有什么问题。我确信(因为我测试过)钩子工作正常，已经发出了http调用。我知道在测试中检查值，也是因为钩子在应用程序中正常工作。我不明白为什么状态的更新似乎从未发生过。
我是我的团队中第一个用这个工具进行测试的人，所以我很迷茫。如果你能帮我，我会非常感激的。
谢谢!
回答 1
Stack Overflow用户
发布于 2022-03-28 06:41:37
在调用钩子测试下的函数时，不应该使用await。
相反，它应该包装在act()中，尽管按照有关异步测试的文档中的指定，在调用await waitForNextUpdate()时可以省略它。
通过此更改，测试通过：
it('test', async () => {
const { result, waitForNextUpdate } = renderHook(() => useHook());
act(() => {
result.current.fetch();
});
expect(result.current.state).toBe(undefined);
await waitForNextUpdate();
expect(result.current.state).toBe('GOOD'); //or at least "BAD"
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71084181
复制相关文章
相似问题
腾讯云开发者
