在 Jest 测试中 Mock 依赖的最佳实践

在进行前端开发时,我们经常需要引用一些第三方的库或文件。在进行单元测试时,这些依赖项的存在可能会造成一些问题。为了避免这些问题,我们可以使用 Mock(模拟)技术。Jest 是一个流行的 JavaScript 测试框架,它提供了 Mock 功能,可以模拟依赖项,使我们的测试更加精准。本文将介绍在 Jest 测试中 Mock 依赖的最佳实践。

核心概念

在 Mock 功能实现之前,我们需要先理解一些核心概念:

被 Mock 的依赖项

在进行单元测试时,我们可能需要测试某个函数或模块的功能,但是这个函数或模块依赖于其他函数或模块的输出结果。这些依赖项就是我们要 Mock 的对象。

Mock 对象

Mock 对象就是一个模拟的对象,用于替换真正的依赖项。Mock 对象可以是纯粹的对象、函数、类等等。

Jest 提供的 Mock 函数

在 Jest 中,有两种 Mock 函数:

  • jest.fn():可以模拟一个函数,并监视其调用情况,返回值等信息。
  • jest.mock():可以模拟一个模块,并提供不同的输出结果,使被测试的函数或模块不需要实际调用到真正的依赖项。

最佳实践

基于以上核心概念,下面介绍在 Jest 测试中 Mock 依赖的最佳实践。

1. 配置 jest.mock()

在使用 Mock 功能前,我们需要配置 jest.mock() 来替换实际的依赖项。以一个简单的示例函数为例:

-------- ----------- -
    ------ --- --------------- -- -
        ---------------
    --
-

-------- --------- -
    ------ --------------------- -- -
        ---------------------- -----
    --
-

-------------- - -
    -------
-

getUser 函数依赖于 fetchData 函数的输出结果,现在我们需要对其进行测试。首先需要配置 jest.mock() 以替换掉 fetchData 函数:

------------------------

还可以进行更详细的配置,例如:

------------------------ -- -- -
    ------ -- -- -
        ------ --------------------- ------
    -
--

这样,当 getUser 函数被测试时,就会自动调用 Mock 函数,并返回 'mock data' 而不是实际的结果。

2. 使用 jest.fn() 监视函数调用

在测试某些函数时,我们需要知道函数是否被正确调用、参数是否正确等等。此时可以使用 jest.fn() 创建一个 Mock 函数并监视其调用情况。

----- --------- - ---------- -- ------------------------

-------- --------- -
    ------ --------------------- -- -
        ---------------------- -----
    --
-

--------------- ----- -- -- -
    ----- ---------
    ------------------------------------
--

jest.fn() 可以使用匿名函数将返回值设置为 Mock 数据,监视函数调用情况后,我们可以使用 toHaveBeenCalled() 进行断言,确保函数被调用。

3. Mock 依赖项输出的数据

当依赖项输出的数据在测试中不稳定时,我们可以使用 jest.fn() 创建 Mock 函数并设置特定返回值,模拟不同的输出情况。

------------------------ -- -- -
    ------ ---------- -- --------------------- -------
--

------------- ---- ---- ------ ----- -- -- -
    ----- ---------
    -------------------------------------------
    -------------------------------------------------- ------
--

通过使用 jest.fn()Promise.resolve(),我们可以模拟一个返回 Mock 数据的函数,确保测试稳定性。

4. Mock 对象的多种返回值

在测试某个函数时,可能需要对该函数的多种调用情况进行测试。对于这种情况,我们可以使用 jest.fn() 在每次被调用时返回不同的结果。

----- --- - ---------
    --------------------------- -- -- ---------------------
    --------------------------- -- -- --------------------

--------- ---- --------- -------- ----- -- -- -
    ------------ ------ -----------
    ------------ ------ -------------------
    ------------------------------------
    ------------------------------------
    ------------------------------------
    ------------------------------------
--

使用 Mock 函数时,可以使用 mockImplementationOnce() 方法来实现多种(不同)返回值。在上面的示例中,add 函数第一次被调用时返回 Promise.resolve,第二次被调用时返回 Promise.reject。

5. Mock 构造函数

在测试某些模块时,可能需要模拟一个类或函数,以便测试其他依赖对象或模块的正确性。我们可以通过 Mock 构造函数来实现这一点。

----- ---------- -
    ------------- -
        -------- - -
    -

    -------- -
        -------- -- ---
    -
-

---------------- ----- -- -- -
    ----- ---- - ---------
    ---------- - ----
    ----- ---------- - --- ------------
    -----------------

    -------------------------------------
    ------------------------------
--

在这段代码中,我们将构造函数 Calculator 与 Mock 函数 jest.fn() 关联,并使用 new 运算符创建一个 Mock 对象 calculator。此时可以测试 calculator 的正确性,也可以通过 mock 的属性 toHaveBeenCalledTimes() 来断言函数被正确调用。

结论

通过本文,我们了解了在 Jest 测试中 Mock 依赖的最佳实践,其中主要包括:

  • 配置 jest.mock() 替换被测试函数的实际依赖项。
  • 使用 jest.fn() 监视函数调用情况,确保函数被正确调用。
  • Mock 依赖项输出的数据,确保测试稳定性。
  • Mock 对象的多种返回值,模拟函数不同的调用情况。
  • Mock 构造函数,模拟一个类或函数,以便测试其他依赖项或模块的正确性。

这些最佳实践将帮助你更好地进行单元测试,确保你的前端代码的正确和稳定。

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