在 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，以免影响其他测试用例的执行。
示例代码如下：
-- -------------------- ---- ------- -- ----------------------- ------------ - ---------- -- ----------------- ----- -- -- ----------------- ----- ----- ----- --- ---- ----------- ------ ----- -- -- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ---------------------- ----- ----- ----- --- --- ------------ -- - ------------------------- --- ----------- -- - ------ ------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658f6afceb4cecbf2d50b2f4