如何在 Jest 中 Mock 掉 fetch 请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用 fetch 来进行网络请求。但在测试中，我们不希望真正发送网络请求，而是希望模拟一个假的响应数据。这时候，就需要在 Jest 中 Mock 掉 fetch 请求。

为什么要 Mock fetch 请求

在测试中，我们需要保证测试的可靠性和一致性，而网络请求是一个不稳定的因素。如果真的发送网络请求，那么测试结果就会受到网络状态、服务器状态等多种因素的影响，导致测试结果不可靠。

另外，网络请求的速度也可能会影响测试的时间，导致测试变得缓慢，不便于开发人员的调试和维护。

因此，Mock 掉 fetch 请求可以避免这些问题，保证测试的可靠性和稳定性。

如何 Mock fetch 请求

在 Jest 中，可以使用 jest.mock() 方法来 Mock 掉 fetch 请求。具体步骤如下：

在测试文件中引入 fetch 方法：
```
import fetch from 'node-fetch';
```
使用 jest.mock() 方法来 Mock 掉 fetch 方法：
```
jest.mock('node-fetch');
```

在测试用例中设置 fetch 方法的返回值：

const mockResponse = { foo: 'bar' };
fetch.mockResolvedValue(mockResponse);

执行测试用例，验证是否得到了正确的数据：

test('should get mock data', async () => {
  const response = await fetch('http://example.com');
  const data = await response.json();
  expect(data).toEqual({ foo: 'bar' });
});

在上面的例子中，我们使用了 mockResolvedValue 方法来设置 fetch 方法的返回值，使其返回一个假的响应数据。然后在测试用例中验证是否得到了正确的数据。

Mock fetch 请求的更多用法

除了在测试中 Mock 掉 fetch 请求，还可以在实际开发中使用 Mock 数据来进行开发和调试。在这种情况下，我们可以使用一些 Mock 数据库来生成假数据，例如 Mock.js、Faker.js 等。

另外，我们还可以使用一些 Mock 数据拦截器，例如 Mock Service Worker、MSW 等，来模拟网络请求和响应，使得开发和调试更加方便和快捷。

总结

在本文中，我们介绍了如何在 Jest 中 Mock 掉 fetch 请求，并讲解了为什么要 Mock fetch 请求。Mock 掉 fetch 请求可以避免网络请求的不稳定性和速度缓慢等问题，保证测试的可靠性和稳定性。Mock 数据库和 Mock 数据拦截器可以帮助我们更好地进行开发和调试。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6577c570d2f5e1655d177973