随着前端开发的不断发展，单元测试日渐重要。而 Jest 作为一种流行的 JavaScript 测试框架，被广泛应用于 JavaScript 单元测试中。其中，Mock 数据是 Jest 测试中的一个重要概念，本文将为你介绍如何在 Jest 测试中使用 Mock 数据并分享一些实用技巧。
什么是 Mock 数据？
以前端开发为例，当我们需要测试一个组件或函数时，我们希望引入一个固定的输入并检查输出结果。但是，在某些情况下，由于数据的复杂性或其他限制，我们无法使用真实数据进行测试。
在这种情况下，我们可以使用 Mock 数据来模拟真实数据。Mock 数据是一种虚构的数据，用于模拟后端 API 响应或其他数据源响应，以便在不受实际数据影响的情况下进行单元测试。
Mock 数据有助于我们在测试中创建可重现的场景，并使我们充分利用 Jest 测试框架提供的自动测试和断言功能。
在 Jest 中使用 Mock 数据
Jest 提供了一个强大的 mocking API，可以轻松地使用 Mock 数据。
使用 Jest.mock()
Jest.mock()函数允许我们截获某个模块的导出和内部实现，并替换为另一个函数或对象。
-- -------------------- ---- -------
-- ----------
-- --------
------ ----- --------- - ----- -- -- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
--
-- ------- ---- -------- ----------- ------
-- -------------
------ - -- ----- ---- ----------
-------------------- -- -- --
---------- ---------------------------
----- - ------ ------- --
---
----
--------------- ------ ------ ----- ------- ----- -- -- -
----- ---- - ----- ------------------
---------------------- ------ ------- ---
---在上例中，Jest 使用 jest.mock() 代替了 fetchData 函数的实现，并将其重载为一个返回固定数据的 mock 版本。现在我们可以安全地在测试中使用 fetchData，并且可以预期它始终返回我们所需的数据。
使用 jest.fn()
jest.fn() 函数允许我们轻松地创建 Mock 函数。这个函数可以返回一个可以被调用并跟踪其调用历史的函数对象。
-- -------------------- ---- ------- -- ---------- -- ----------- ------ ----- -------- - ------ -- - ------------------- ----------- -- -- ------- ---- -------- --------- -- ---- -- -- ---------------- ------ - -------- - ---- ------------ -------------- ------ --- --- ------ -- -- - ----- -------------- - ------------------- ------- -------- - ---------- ----------------- --------------------------------------------------- -------- ---
在上例中，我们使用 jest.fn() 创建了一个 Mock 函数，可以轻松地进行断言以确保名称被正确“打印出来”。
使用 jest.spyOn()
jest.spyOn() 函数允许我们轻松跟踪函数的调用历史，并检查函数是被正确调用还是未被调用。
-- -------------------- ---- -------
-- ----------
-- ------
------ ----- ------- - ----- ---- -- -
----- -------- - ----- ---------------------------------------------
----- ---- - ----- ----------------
------ -----
-
-- ------- ---- -------- ------------ -- ------- --------
-- -----------
------ - ------- - ---- --------
-------- ------ ---- ------- ---- ------- ---- ----- -- -- -
----- --- - ------------------ ------------------------------ --
-----------------
----- -- -- ----------------- --- - ---
--
--
----- ---- - ----- -----------
--------------------------------------------------------------
---------------------- --- - ---
------------------
---在上例中，我们使用 jest.spyOn() 跟踪了 fetch() 函数的调用历史，并通过 mockImplementation() 函数为其提供了一个返回的 mock 实现。这使我们可以准确地测试 getUser 是否正确发出了请求并返回了正确的用户数据。
使用 Mock 数据的技巧
1. 在描述测试场景时，更加具体
在描述测试场景时，我们通常需要提供语义化的测试名称。我们可以在测试名称中包含一些符号，以更具体地描述测试场景。
例如，可以使用“获取用户”而不是“用户”以描述我们需要检查 getUser 函数是否返回了正确的用户。这有助于理解每个测试的目的并容易阅读。
2. 分离测试场景和测试实现
当我们将测试场景和测试实现分开时，可以最大程度地提高测试的可读性和可维护性。我们可以在测试文档的上部分描述测试场景，然后在下部分编写测试实现，以确保测试场景和测试实现之间有明显的分离。
3. 为每个 Mock 数据添加注释
在给 Mock 数据添加注释时，我们应该考虑在注释中包含我们所模拟的 API 响应或数据格式。这有助于其他开发人员快速理解 Mock 数据的目的并防止出现混淆。
4. 可以使用外部 Mock 数据源
如果您不想为每个测试或测试套件手动创建 Mock 数据，则可以使用外部 Mock 数据源。有一些在线工具，如 jsonplaceholder，可以提供默认 Mock 数据。这使我们可以专注于测试实现而无需花费太多时间和精力为每个测试编写单独的 Mock 数据。
总结
本文介绍了 Jest测试框架中 Mock 数据的基本概念，并详细了解了如何使用 Jest.mock()、jest.fn() 和 jest.spyOn() 函数。同时，还分享了 Mock 数据的一些最佳实践和技巧，以帮助您更好地利用它们来创建可重现的场景并提高测试的可读性和可维护性。
虽然 Mock 数据不是完美的，但它们是必不可少的工具，用于解决复杂测试问题并确保代码质量。如果您尚未使用 Mock 数据进行单元测试，我强烈推荐您尝试一下，并从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b1381848841e9894d8cd14