前言
在前端开发中，测试是一个重要的部分。为了增强测试的可靠性和覆盖率，我们需要使用一系列的工具来进行测试。针对 React 应用程序的测试，我们通常会使用 Enzyme 作为测试框架。Enzyme 为我们提供了许多工具，如 shallow、mount、render 等。除此之外，Enzyme 还支持 stub、spy、mock 功能，这些工具可以让我们更加方便地进行测试。
stub
Stub 在测试中是一个非常常见的概念。它是一个占位符，可以模拟返回值或行为。在 Enzyme 中，我们可以使用 stub 来模拟组件的函数，从而在测试中操纵测试结果。下面是一个例子：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ---- --------
-------- ----------------- -
----- - ----- ----------- - - -----
------ -
---- ----------------------
----- -------
------
-
-
------------ ---- ----------- ------ ---- --------- -- --------- -- -- -
----- ----------- - ----------
----- ------- - ------------------- ------------------------- ----------- ----
--------------------------------------
---------------------------------------
---在上面的例子中，我们测试了在组件 HelloWorld 被点击时 handleClick 函数是否被调用。这里的 handleClick 函数不需要有任何具体操作，只需要在被调用时让我们知道它被执行了就好了。这种情况下就可以使用 stub，将 handleClick 函数替换成 jest.fn()，这个函数会返回一个占位符，而实际上不会做任何事情。
spy
Spy 与 stub 很相似，但是它可以记录被调用的情况。当我们需要测试某个函数是否被调用过，以及被调用过多少次时，就可以使用 spy。Enzyme 提供了 spyOn 方法，用于监视指定对象上的方法。下面是一个例子：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ---- --------
-------- --------------- -
----- - ------ ---------- - - -----
------ -
-----
------- -------------------------- --------------
----------------- -- -
---- -------------------------------
---
------
-
-
------------ ---- ---------- ------ ---- ------ -- --------- ----- -- -- -
----- -------------- - ---------- -- --------------------
----- ------- - ----------------- ---------- --------------------------- ---
-----------------------------------------
----- ------------------
------------------------------------------------
---在上面的例子中，我们测试用户列表组件（UserList）中的按钮是否被点击时，fetchUsers 函数是否被正确地调用了。这里的 fetchUsers 函数是通过 props 传递进来的，我们使用 jest.fn() 创建一个模拟函数，然后使用 spyOn 方法监视它，这样就可以记录它被调用的情况了。
mock
Mock 用于模拟一些依赖，使测试更加独立。当我们需要测试一个组件时，可能需要依赖其他组件或服务，如果这些组件或服务没有准备好，那么测试就无法进行。这时候就可以使用 mock 来模拟这些依赖。Enzyme 提供了 jest.mock() 方法，用于模拟依赖，下面是一个例子：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ---- --------
------ - ---------- - ---- -------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
---------- -----
--
-
----- ------------------- -
--------------- ---------- ---- --
----- ----- - ----- -----------------------
--------------- ------ ---------- ----- --
-
-------- -
----- - ------ --------- - - ----------
------ -
-----
---------- -- -
---------------------
--
----------- -- -
-----
----------------- -- -
---- -------------------------------
---
------
--
------
-
-
-
------------------------
------------ ------ ---- ---- ----- --------- ------- ----- -- -- -
----- ----- - -
- --- -- ----- ----- --
- --- -- ----- ------- -
--
-----------------------------------------------
----- ------- - ----------------- ----
----- ------------------
-----------------
-------------------------------------------------------------
---在上面的例子中，我们测试的是用户列表组件在渲染时是否正常获取数据并显示。在组件中使用了 ApiService.fetchUsers() 来获取用户数据，如果这个服务没有准备好怎么办？这里我们可以使用 jest.mock() 来模拟它，这个方法会在运行测试时自动替换掉原生的 ApiService.fetchUsers() 方法，从而让测试可以顺利进行。
总结
在使用 React 进行前端开发时，测试是一个不可或缺的部分。Enzyme 是一个出色的测试框架，它提供了一系列的工具来帮助我们进行测试，其中包括 stub、spy、mock 等。这些工具可以让我们更加方便地进行测试，从而增强测试的可靠性和覆盖率。在实际使用中，我们可以根据具体的情况选择使用 stub、spy、mock，从而达到最佳的测试效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64657c58968c7c53b062a6ae