利用 Jest Mock 实现 React Native 中 Fetch API 的模拟

在 React Native 开发中，我们经常会使用 Fetch API 进行网络请求。但是在测试时，我们可能需要模拟网络请求的结果，以便测试组件的渲染和交互。这时候，Jest Mock 就可以帮助我们实现 Fetch API 的模拟。

Jest Mock 简介

Jest 是一个流行的 JavaScript 测试框架，它提供了 Mock 功能，能够模拟函数和模块的行为。Jest Mock 是 Jest 框架中的一种 Mock，它可以模拟网络请求、定时器、事件等行为，使我们能够更方便地编写测试用例。

Fetch API 简介

Fetch API 是一种基于 Promise 的网络请求 API，它可以发送 HTTP 请求并获取响应。在 React Native 中，我们可以使用 Fetch API 发送网络请求，例如：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

利用 Jest Mock 实现 Fetch API 的模拟

在测试中，我们可能需要模拟网络请求的结果，以便测试组件的渲染和交互。这时候，我们可以使用 Jest Mock 来实现 Fetch API 的模拟。

首先，我们需要使用 Jest 提供的 global.fetch 方法来替换原生的 Fetch API。我们可以在测试文件中编写如下代码：

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

这段代码定义了一个名为 fetch 的全局函数，它返回一个 Promise 对象，该对象的 then 方法返回一个包含模拟数据的 Promise 对象。这样，当我们在测试中使用 Fetch API 进行网络请求时，实际上会调用这个全局函数，从而返回模拟数据。

例如，我们可以编写如下测试用例：

test('fetch data', async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  expect(data).toEqual({ data: 'mock data' });
});

这个测试用例使用 Fetch API 发送了一个网络请求，并断言返回的数据与模拟数据相同。由于我们在测试文件中定义了一个全局的 fetch 函数，因此这个测试用例实际上会返回模拟数据，而不是真实的网络请求结果。

总结

利用 Jest Mock 实现 Fetch API 的模拟，可以让我们更方便地编写测试用例，提高测试效率。在实际开发中，我们可以根据需要模拟不同的网络请求结果，以便测试不同的场景和业务逻辑。同时，我们也需要注意在测试结束后恢复原生的 Fetch API，以免影响其他测试用例的执行。

示例代码如下：

// __tests__/fetch.test.js

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

test('fetch data', async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  expect(data).toEqual({ data: 'mock data' });
});

afterEach(() => {
  global.fetch.mockClear();
});

afterAll(() => {
  delete global.fetch;
});

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