前言
在前端开发中,我们经常会使用 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 函数了:
// javascriptcn.com 代码示例 jest.mock('./getTradeData'); const mockData = { symbol: 'AAPL', open: 110.65, close: 111.35 }; const mockGetTradeData = require('./getTradeData'); mockGetTradeData.mockResolvedValue(mockData);
这个示例中,我们使用 jest.mock()
创建了一个 Mock 对象。然后,我们使用 require()
将其调用,以便我们可以使用它。接下来,我们使用 mockResolvedValue()
函数定义了返回的值。
以上就是手动 Mock 的基本操作。手动 Mock 可以通过设置返回值或模拟异常来增强。
总结
在本文中,我们深入了解了 Jest 的高级 Mock 实现,涵盖了手动和自动 Mock ,并介绍了创建 Mock 函数和 Mock 对象的基本操作。我们相信,使用这些 Mock 技术将有助于开发人员更轻松地编写高质量的单元测试。
参考来源
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/652e632a7d4982a6ebf6acc6