测试是前端开发中必不可少的一个环节。其中，基于请求的测试是测试中比较重要的一个方面。在 Jest 中，我们可以使用 Mock 实现基于请求的测试，进一步提高前端开发的效率和质量。本篇文章将详细介绍 Jest 中使用 Mock 实现基于请求的测试的方法和技巧，并使用示例代码说明。
Mock 能做什么？
Mock 是模拟对象的意思。在 Jest 中，我们可以使用 Mock 模拟外部的对象（如网络请求、浏览器 API 等）和函数，在测试中使用这些 Mock 对象，达到模拟外部环境和函数调用的效果。Mock 对象可以让我们在测试中准确地控制函数的参数和返回值，从而更好地测试函数逻辑、边界条件等。
使用 Mock 的好处在于，能够避免在真实环境中进行测试（如发起真实的网络请求、调用浏览器 API 等），从而减少测试时间和测试成本，提高测试效率。此外，Mock 还能保持测试的稳定性，避免因不稳定的网络环境等因素导致测试不通过的问题。
使用 Mock 实现基于请求的测试
在 Jest 中，我们可以使用 Mock 实现基于请求的测试。主要的实现思路是：对于网络请求，我们可以 Mock 掉相应的函数，使其返回预期的结果；对于函数中调用的网络请求，我们可以使用 Mock 实现假请求，使函数获取假数据，从而测试函数的逻辑和正确性。下面以具体的例子介绍。
Mock 网络请求
在 Jest 中，我们可以使用 jest.mock() 函数来 Mock 掉网络请求相关的函数。例如，如果我们需要 Mock 掉 fetch()，可以使用如下代码：
jest.mock('path/to/fetch', () => {
return jest.fn().mockResolvedValue({ data: 'mockdata' });
});上述代码中，我们使用 jest.mock() 函数在测试文件中引入 path/to/fetch 模块，并将其 Mock 成一个 Jest mock 函数。该 mock 函数返回一个 Promise，其中包含一个 data 属性，其值为 mockdata。这就实现了对 fetch() 函数的 Mock。
接下来，我们可以使用 fetch() 函数，并通过断言验证其正确性：
test('test fetch', async () => {
const res = await fetch('http://example.com/');
expect(res.data).toBe('mockdata');
});在上述代码中，我们使用断言验证了 fetch() 函数的返回值包含 data 字段，并且其值为 mockdata。
Mock 函数中的网络请求
在函数中调用网络请求，我们同样可以使用 Mock 实现假请求，从而测试函数的逻辑和正确性。下面以一个具体的示例来说明：
async function fetchData() {
const res = await fetch('http://example.com/');
const result = res.data;
return result;
}上述代码中，函数 fetchData() 中调用了 fetch() 函数，并将其结果赋值给 res。我们可以使用 Jest 的 Mock 实现函数 fetch() 的假请求，从而测试函数 fetchData() 的正确性。
具体实现方法是，先 Mock 掉 fetch() 函数，使其返回预期的结果，然后调用 fetchData() 函数，使用断言验证其正确性。代码示例如下：
test('test fetchData', async () => {
jest.mock('path/to/fetch', () => {
return jest.fn().mockResolvedValue({ data: 'mockdata' });
});
const res = await fetchData();
expect(res).toBe('mockdata');
});在上述代码中，我们使用 jest.mock() 函数 Mock fetch() 函数，使其返回 Promise，包含一个 data 字段，其值为 mockdata。然后调用 fetchData() 函数获取返回值 res，并使用断言验证其正确性。
总结
本篇文章详细介绍了 Jest 中使用 Mock 实现基于请求的测试的方法和技巧。Mock 对象能够帮助我们模拟外部环境和函数调用，从而方便测试函数逻辑和正确性，减少测试时间和测试成本，保持测试的稳定性。建议在前端开发过程中广泛应用 Jest 的 Mock 功能，提高开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0d41d48841e9894d1c182