在前端开发中，单元测试是不可或缺的一部分。而 Jest 作为一个广泛应用的 JavaScript 测试框架，提供了丰富的工具来协助我们编写高质量的测试用例。其中，Mock 模块和 Spy 模块是 Jest 中非常重要的两个概念。本文将详细介绍这两个模块的使用方法和指导意义。
Mock 模块
Mock 模块是一个非常重要的概念，它可以用来替代一些外部依赖，以达到更好的测试效果。比如，我们的代码中可能会有一个获取数据的函数，它会从后端服务器请求数据并返回。如果我们想要对这个函数进行测试，我们需要考虑到网络条件以及后端服务器的可用性等一系列问题。此时，我们可以利用 Mock 模块来代替这个函数，使得我们的测试更加可控和稳定。
在 Jest 中，我们可以通过以下两种方式来创建 Mock 函数：
- 手动创建 Mock 函数
手动创建 Mock 函数是一种比较简单的方式。你可以使用 jest.fn() 来创建一个 Mock 函数。这个函数会返回一个新的、空的 Mock 函数对象，它可以被用作 Spy 来监视函数的调用，也可以被用作 Mock 来替换掉原函数。
下面是一个使用 jest.fn() 创建 Mock 函数的例子：
-- -------------------- ---- ------- -- ------------ -------- ------------------- - ------------- -- - ----- ---- - - ----- ------- ---- -- -- --------------- -- ------ - -- ------ ---- -- ----- ------------ - ---------- -- -- ------------- ---- ------ ------------------------ -- -- ---- ------- ---------------------------------------- ----------------------------------------------- ----------------------------------------------- ----- ------- ---- -- ---展开代码
在上面的例子中，我们手动创建了一个 Mock 函数，并将其作为参数传入 fetchData 函数。测试过程中，我们可以通过 Spy 来监视 Mock 函数的调用情况，并对其传入的参数进行断言。
- 使用 Jest 提供的自动 Mock 功能
除了手动创建 Mock 函数外，Jest 还提供了自动 Mock 的功能，可以帮助我们自动生成 Mock 函数并替换掉原函数。我们只需要在测试用例中引入要 Mock 的模块，Jest 就会自动为我们创建 Mock 函数并注入到被测试代码中。
下面是一个自动 Mock 功能的例子：
-- -------------------- ---- ------- -- ------------ ------ --------- ---- -------------- -- -------- -------------- -------- ---- -- ------------------------- ------------ ------- ---- ------- ------ ----- -- -- - -- -- ---- ----- ----------------------------- ----- ------- ---- -- --- -- ------ ----- ------ - ----- ------------ -- ---- ------------------------ ----- ------- ---- -- --- ---展开代码
在上面的例子中，我们通过 jest.mock 来告诉 Jest 我们要 Mock 的模块路径。此时，Jest 会自动为我们创建一个 Mock 函数，并替换掉原函数。我们可以通过 fetchData.mockResolvedValue 来设置 Mock 函数的返回值，然后执行测试代码并进行断言。
Spy 模块
Spy 模块是 Jest 中的另一个非常重要的概念，它可以用来监视函数的调用情况。Spy 对象会记录每个函数的调用情况，包括调用次数、参数、返回值等，并且可以让我们在测试过程中对这些调用情况进行断言。
在 Jest 中，我们可以使用 jest.spyOn() 来创建一个 Spy 对象，它会监视目标函数的调用情况。下面是一个 Spy 的例子：
-- -------------------- ---- ------- -- ------------ -------- ------------------- - ------------- -- - ----- ---- - - ----- ------- ---- -- -- --------------- --------------- -- ------ - ------------ ---- -------- ------- ------ -- - -- ---- --- -- ----- ----------- - ---------- -- -- ------------- --- ------ ----------------------- -- -- --------- ---- ------------- -- - -- -- --- ---------- --------------------------------------------- ---------------------------------------------- ----- ------- ---- -- --- ---------------------------------------------- ----- ------- ---- -- --- ------- -- ------ ---展开代码
在上面的例子中，我们创建了一个 Spy 对象，并将其作为参数传入 fetchData 函数中。测试过程中，我们可以使用 expect(callbackSpy).toHaveBeenCalledTimes(2) 来断言 Spy 对象被成功调用了两次，并且使用 callbackSpy.mock.calls 来获取函数调用时传入的参数值。
总结
Mock 模块和 Spy 模块是 Jest 中非常重要的两个概念，它们可以为我们编写高质量的单元测试提供很大的帮助。在测试过程中，我们可以使用 Mock 模块来代替一些外部依赖，以达到更好的可控性和稳定性；而 Spy 模块则可以帮助我们更好地监视函数的调用情况，并进行相应的断言。了解和掌握 Mock 模块和 Spy 模块的使用方法，不仅可以提升我们的测试技能，还可以让我们的代码更加健壮和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ad1dcdadd4f0e0ff6b0cc7
