Mock 是一种在测试中替代依赖项的技术。在前端领域中，我们通常使用 Mock 来模拟服务器端的响应，以便准确地测试我们的代码。Jest 是一个非常流行的 JavaScript 测试框架，它提供了大量的 Mock 功能。但是，使用 Jest Mock 也需要一些注意事项和技巧，本文将详细介绍以下内容：
- Jest 中 Mock 的基本使用
- 在多个测试用例中共享 Mock
- Mock 的模块导入时机
- 使用 Mock 实现一个复杂的测试案例
Jest 中 Mock 的基本使用
在 Jest 中，可以通过 Mock 实现对模块或函数的模拟。下面是一个基本的 Mock 示例：
-- -------------------- ---- ------- -- ------- ----- --------- - ---------- -- ------------------------- ----------------- - ---------- -- ------- ----- - --------- - - ------------------ --------------- ------ -- -- - ----- ---- - ------------ ----------------------------------- ---
在上面的示例中，我们定义了一个 Mock 模块 mock.js，并导出了一个名为 fetchData 的 Mock 函数。在测试用例中，我们引入了该 Mock 函数，并调用它来测试我们的逻辑是否正确。
通常情况下，我们可以在测试用例中使用 jest.fn() 来创建 Mock 函数，该函数可以用于测试我们的逻辑是否按照预期执行。使用 expect().mock 来对一个 Mock 函数进行断言。例如，在上面的示例中，我们可以使用 expect(fetchData).toHaveBeenCalled() 来判断 fetchData 函数是否被调用。
在多个测试用例中共享 Mock
在 Jest 中，Mock 函数是可以在多个测试用例之间进行共享的，这意味着我们不需要在每个测试用例中都定义一次 Mock 函数。例如，我们可以使用 jest.mock() 函数来进行 Mock，如下示例：
-- -------------------- ---- ------- -- ------- -------------- - - ---------- ---------- -- ------------------------- -- -- ------- -------------------- ----- - --------- - - ------------------ --------------- ------ -- -- - ----- ---- - ------------ ----------------------------------- --- --------------- ------ -- -------- -- -- - ------------------------------------- ---
通过在 test.js 文件中使用 jest.mock() 函数来引入 mock.js 文件，我们可以共享 fetchData 函数的 Mock，从而在测试用例中继续使用该函数的 Mock 返回值。
Mock 的模块导入时机
Jest 根据模块导入的时机来决定 Mock 的具体行为。在 Jest 中，我们需要注意以下几个点：
- 如果在模块导入之前定义了 Mock 函数，则该 Mock 函数会被应用到所有相关的模块中。
- 如果在模块导入之后定义了 Mock 函数，则该 Mock 函数只会被应用于特定的模块中。
例如，在下面的示例中，由于 mod.js 导入之前我们已经定义了 Mock 函数，因此该 Mock 函数会被应用到 mod.js 中的所有函数中：
-- -------------------- ---- ------- -- ------- ----- --------------- - ----------------- -------------------------- -- -- -- -------------- ---------- -- ------- --------- ---- ---------- ----- ------ -- -- - ----- ------ - ------------------ --------------------------- --------- ---
为了避免不必要的 Mock 影响到其他测试用例，我们建议在每个测试用例中，都单独进行一次 Mock 设定，以确保 Mock 的正确性。
使用 Mock 实现一个复杂的测试案例
在 Jest 中，我们可以使用 Mock 来实现更为复杂的测试用例。例如，我们可以使用 Mock 模拟请求和响应的过程，以测试我们的逻辑是否正确。下面是一个示例：
-- -------------------- ---- -------
-- -------
----- ----- - -----------------
--------------- - ---------- -- -----------------
----- -
------ ------- -------
-------- ------- ---------
--
----
-- -------
----- - ------- - - ------------------
----- - --------- - - -------------------
-------------------
--------------- ------ ----- -- -- -
----- ---- - -
----- -
------ ------- -------
-------- ------- ---------
--
--
----------------------------------
----- ---- - ----- ---------------------------------
--------------------------------
---
------------- ------ -- -- -
------------------------------------
------ ------- -------
-------- ------- ---------
---
---在上面的示例中，我们定义了一个名为 getPost 的 Mock 函数，并通过 jest.mock() 函数将其引入。在 test.js 文件中，我们通过 jest.mock('axios') 来 Mock 原本的 axios 方法。在执行测试用例时，fetchPost 函数会调用 axios.get() 方法，并通过 mockResolvedValue() 方法来 Mock 此方法的返回值，进而测试我们的逻辑是否正确。
总结
在 Jest 中使用 Mock，需要注意以下几个点：
- 基本使用方法：使用
jest.fn()来创建 Mock 函数，使用expect().mock来断言 Mock 进行了哪些操作。 - 共享 Mock：使用
jest.mock()函数来共享 Mock，避免重复定义 Mock 函数。 - 导入时机：在导入模块之前定义的 Mock 函数会被应用到所有模块中，导入模块之后定义的 Mock 函数只会应用到特定模块中。
- 复杂测试用例：使用 Mock 模拟网络请求和响应，测试我们的逻辑是否正确。
希望这篇文章对初学者和有一定经验的开发人员都有帮助，以便更好地使用 Jest Mock 进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457500f968c7c53b0a118d8