前言
测试是前端开发工作中至关重要的一环，而 Enzyme 是 React 应用程序中用于测试组件的 DSL。在测试组件时，需要将组件从其环境中孤立出来，以便测试其行为是否符合预期。通常情况下，我们需要 mock 掉一些不必要的依赖项，例如 API 调用或用户交互。在这篇文章中，我们将探讨如何使用 jest.fn() 在 Enzyme 测试中进行 mock。
Jest.fn()
jest.fn() 是 Jest 测试框架中提供的一个 mock 函数创建工具，该函数允许我们创建一个与原始函数具有相同 API 的 mock 函数。
让我们看一个简单的例子。假设我们有以下函数：
function add(a, b) {
return a + b;
}我们可以使用 jest.fn() 来创建一个 mock 函数，如下所示：
const addMock = jest.fn();
现在我们可以使用 addMock() 作为 add() 的一个替代品，就像这样：
addMock.mockReturnValue(3); console.log(addMock(1, 2)); // 3
当然，我们也可以清除 mock 函数的模拟行为：
addMock.mockReset();
现在，让我们看看如何将 jest.fn() 用于 Enzyme 测试中的 mock。
Mocking in Enzyme Tests
我们通常需要 mock 远程调用、用户输入等操作，以便在不告诉其他组件的情况下测试一个组件。这些 mock 函数可以用来模拟其他组件的行为，以便我们在其依赖项没有准备好的情况下测试应用程序的其他部分。
让我们看一个具体的例子。假设我们有以下 Login 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------- ----- -- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ------------ - ------- -- -
-----------------------
--------------- ----------
-
------ -
----- ------------------------
------ ----------- ---------------- ------------- -- ---------------------------- --
------ --------------- ---------------- ------------- -- ---------------------------- --
------- ----------------------------
-------
--
-
------ ------- ------我们可以 mock 掉 login props，以便我们测试 Login 组件的行为：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----- ---- ---------- ----------- --- ----- -------- ---- --- ------- -------- -- -- - ----- --------- - ---------- ----- ------- - -------------- ----------------- ---- ----------------------------------------------------- - ------- - ------ ----------- - --- --------------------------------------------------------- - ------- - ------ --------------- - --- --------------------------------------- - --------------- --------- --- ----------------------------------------------------- --------------------------------------------------------- ---
通过上面的测试，我们可以确保 login prop 被正确调用并传入了正确的参数。
总结
在本文中，我们学习了如何使用 jest.fn() 在 Enzyme 测试中进行 mock。我们了解了如何创建 mock 函数并将其用于模拟组件的行为。我们示范了如何在测试 Login 组件时将 login prop mock，并确保其被正确调用和传递了正确的参数。
Enzyme 是一个非常强大的测试库，它能够帮助我们对组件进行快速、简单和可预测的测试。 我们希望在这个简短的教程中，您已经开始了解如何使用 Enzyme 进行 JSX 测试，以及如何使用 jest.fn() 进行 mock。 请注意，在真实的应用程序中，必须考虑非常多的情况，例如异步操作，不同的参数，以及 mock 的路径，但总体来说，这是一项非常强大的工具，可以加快您的项目开发时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dbe7d968c7c53b0c603a6