我做了一个简单的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>
);
}
jsdom浏览器不是一个完整的浏览器,它不理解什么是fetch函数,所以我们需要创建一个行为类似于fetch的全局函数,并为其提供类似的模拟数据(MOCK_DATA)。
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve(MOCK_DATA),
})
);