Jest 测试中如何正确模拟 React 组件的异步 useEffect？

令狐倩利提问于 2026-03-05 14:04:22 阅读 5

框架

我在用 Jest + React Testing Library 测试一个组件，它在 useEffect 里发起了异步请求。测试总是报“无法在未挂载的组件上执行 setState”，我试过用 await waitFor 包裹断言，但还是不行。

这是我的组件简化版：

useEffect(() => {
  const fetchData = async () => {
    const data = await api.getData();
    setData(data);
  };
  fetchData();
}, []);

测试代码大概这样写：

render(<MyComponent />);
await waitFor(() => expect(screen.getByText('Loaded')).toBeInTheDocument());

到底该怎么正确处理这种异步副作用的测试？是不是漏了什么清理逻辑？

性能优化组件设计

我来解答赞 2 收藏

反馈

1 条解答

梦幻 Lv1

问题在于你的组件卸载时异步请求还没完成。加个cleanup函数和取消标记：

useEffect(() => {

  let isMounted = true;

  const fetchData = async () => {

    const data = await api.getData();

    if (isMounted) setData(data);

  };

  fetchData();

  return () => { isMounted = false };

}, []);



// 测试代码保持不变

这破问题我踩过N次坑了，记得一定要在卸载时取消setState操作。

2026-03-05 14:19