如何创建 Jest 高级 Mock 函数

前言

在前端开发中,我们经常会使用 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 函数:

在这个例子中,我们使用 jest.fn() 创建了一个 Mock 函数 mockFn 。然后,我们连续调用了 mockReturnValueOnce() 三次,以指定 Mock 函数的返回值。

完整的 Mock 函数

让我们再看一个更复杂的例子,来模拟下面这个函数:

首先,我们需要手动 Mock fetch() 函数,为此我们可以创建一个新的 Mock 函数:

在这个例子中,我们手动创建了一个返回一个对象的 fetch() 函数。Mock 函数的使用非常简单,可以直接替换原始函数。最后,我们将这个函数放在全局范围内,以便其他模块可以使用它。

现在,我们可以开始创建 Mock 函数了:

这个示例中,我们使用 jest.mock() 创建了一个 Mock 对象。然后,我们使用 require() 将其调用,以便我们可以使用它。接下来,我们使用 mockResolvedValue() 函数定义了返回的值。

以上就是手动 Mock 的基本操作。手动 Mock 可以通过设置返回值或模拟异常来增强。

总结

在本文中,我们深入了解了 Jest 的高级 Mock 实现,涵盖了手动和自动 Mock ,并介绍了创建 Mock 函数和 Mock 对象的基本操作。我们相信,使用这些 Mock 技术将有助于开发人员更轻松地编写高质量的单元测试。

参考来源

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/652e632a7d4982a6ebf6acc6


纠错
反馈