前言
在前端开发中，我们经常会使用 Jest 进行单元测试。在 testing-library 中，通过使用 render() 函数来渲染组件，然后使用 find*() 等函数来选择组件的节点。然而，有些情况下需要对一些依赖进行 Mock ，以确保测试是干净的并且可以快速地运行。本文将深入介绍 Jest 的高级 Mock 实现。
什么是 Jest 的 Mock ？
简单来说，就是将一个模块替换成一个模拟对象，以方便我们的测试。有两个例子：
- 抓取市场交易数据的模块
- 发送推送通知的模块
在生产模式下，这些模块会正常工作，但是在测试模式下，我们需要用 Mock 对象来模拟这些模块，以便我们更好地控制测试。
因此 Mock 对象可以模拟外部依赖，以使我们的测试更加灵活。接下来，我们将介绍如何使用 Jest 的高级 Mock 来创建这些 Mock 对象。
如何使用 Jest 的高级 Mock ？
首先，Jest 提供了两种类型的 Mock ：手动 Mock 和自动 Mock 。手动 Mock 可以通过手动创建函数并将它们传递给 Jest Mock 实现来创建，而自动 Mock 可以使用 Jest 的自动 Mock 帮助我们自动创建 Mock 对象。
在本文中，我们将主要关注手动 Mock 。让我们一起来看一下如何创建 Mock 函数。
简单的 Mock 函数
以下是一个简单的 Mock 函数：
const mockFn = jest.fn(() => 'default'); mockFn.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);
在这个例子中，我们使用 jest.fn() 创建了一个 Mock 函数 mockFn 。然后，我们连续调用了 mockReturnValueOnce() 三次，以指定 Mock 函数的返回值。
完整的 Mock 函数
让我们再看一个更复杂的例子，来模拟下面这个函数：
async function getTradeData() { const res = await fetch('https://api.example.com/trade-data'); const data = await res.json(); return data; }
首先，我们需要手动 Mock fetch() 函数，为此我们可以创建一个新的 Mock 函数：
const fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ symbol: 'AAPL', open: 100.65, close: 101.35 }) })); global.fetch = fetch;
在这个例子中，我们手动创建了一个返回一个对象的 fetch() 函数。Mock 函数的使用非常简单，可以直接替换原始函数。最后，我们将这个函数放在全局范围内，以便其他模块可以使用它。
现在，我们可以开始创建 Mock 函数了：
-- -------------------- ---- ------- ---------------------------- ----- -------- - - ------- ------- ----- ------- ------ ------ -- ----- ---------------- - -------------------------- ---------------------------------------------展开代码
这个示例中，我们使用 jest.mock() 创建了一个 Mock 对象。然后，我们使用 require() 将其调用，以便我们可以使用它。接下来，我们使用 mockResolvedValue() 函数定义了返回的值。
以上就是手动 Mock 的基本操作。手动 Mock 可以通过设置返回值或模拟异常来增强。
总结
在本文中，我们深入了解了 Jest 的高级 Mock 实现，涵盖了手动和自动 Mock ，并介绍了创建 Mock 函数和 Mock 对象的基本操作。我们相信，使用这些 Mock 技术将有助于开发人员更轻松地编写高质量的单元测试。
参考来源
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e632a7d4982a6ebf6acc6
