创建React App & Jest，无法在测试文件中进行API调用

Question

我做了一个简单的create-react-app，只是尝试在测试用例中调用API。实际上进行了 api 调用，但 .then 函数中不会运行任何内容。

我试图弄清楚这一点的原因是因为我正在另一个应用程序中使用 MSW 在网络级别模拟请求，而这种行为使我无法测试我的应用程序。 MSW 将返回模拟响应，但由于 .then() 中没有任何内容运行，我将无法更新状态

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

//App.tsx
function App() {
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        //nothing is not logged in the test terminal
        //so I cannot do setState or something similar
        console.log("data", data);
      });
  }, []);
  return (
    <div className="App">
      app
    </div>
  );
}

Answer 1

jsdom浏览器不是一个完整的浏览器，它不理解什么是fetch函数，所以我们需要创建一个行为类似于fetch的全局函数，并为其提供类似的模拟数据（MOCK_DATA）。

global.fetch = jest.fn(() =>
 Promise.resolve({
 json: () => Promise.resolve(MOCK_DATA),
 })
);