使用Create React App与Jest时，测试中API调用的.then逻辑不执行

问题场景 #

在Create React App项目中，组件通过useEffect发起API请求，测试用例执行时能看到请求已发起，但.then回调内的代码完全不执行。这导致使用MSW模拟网络请求时，即便能拿到模拟响应，也无法触发状态更新，无法完成测试验证。

代码示例 #

App.tsx

function App() {
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        // 测试终端中无任何日志输出，无法执行setState等操作
        console.log("data", data);
      });
  }, []);
  return (
    <div className="App">
      app
    </div>
  );
}

App.test.tsx

test("renders learn react link", () => {
  render(<App />);
});

问题原因 #

Jest测试默认同步执行，测试函数在调用render(<App />)后会立即结束，不会等待异步的fetch请求及其后续的.then回调执行。异步任务还处于待处理状态时，测试已经完成，因此回调代码没有机会运行。

解决方案 #

核心思路是让测试等待异步操作完成，推荐使用React Testing Library提供的waitFor工具，它能自动等待异步任务和状态更新完成。

方法1：使用waitFor验证回调执行

修改测试用例为异步函数，通过waitFor等待异步逻辑完成，同时可以监听日志输出验证回调是否执行：

// App.test.tsx
import { render, waitFor } from '@testing-library/react';
import App from './App';

test("renders app and fetches data", async () => {
  // 监听console.log，用于验证回调执行
  const logSpy = jest.spyOn(console, 'log').mockImplementation();

  render(<App />);

  // 等待回调执行，断言日志输出符合预期
  await waitFor(() => {
    expect(logSpy).toHaveBeenCalledWith("data", expect.any(Array));
  });

  // 恢复console.log原有功能
  logSpy.mockRestore();
});

方法2：结合MSW模拟请求时的UI断言

如果使用MSW模拟接口，同样需要用waitFor等待模拟响应完成并触发状态更新，通过断言UI变化验证逻辑：

// 假设MSW已配置好对应接口的mock handler
test("fetches mocked data and updates UI", async () => {
  const { getByText } = render(<App />);

  // 等待状态更新后UI渲染完成，断言目标文本存在
  await waitFor(() => {
    expect(getByText('某个数据渲染后的文本')).toBeInTheDocument();
  });
});

方法3：手动等待微任务队列清空（不推荐，仅作补充）

如果不想使用waitFor，也可以通过等待微任务队列清空，让异步回调有机会执行：

test("renders learn react link", async () => {
  render(<App />);
  // 等待所有微任务完成
  await new Promise(resolve => setImmediate(resolve));
});

总结 #

只要确保测试不会提前结束，给异步请求的回调留出执行时间，就能解决这个问题。React Testing Library的waitFor是最规范的解决方案，它能适配各种异步场景，包括状态更新、DOM变化等。

内容的提问来源于stack exchange，提问作者Veritas1832