简介
Enzyme 是 React 生态系统中一款非常流行的用于测试 React 组件的工具。Mock 和 Spy 是 Enzyme 的两个重要功能，能有效地帮助开发者进行测试，提高测试效率。本篇文章将详细介绍 Enzyme 中 mock 和 spy 的使用指南，包括基本概念、使用方法、示例代码以及注意事项。
基本概念
- Mock：模拟一个函数或对象，屏蔽掉测试中不需要关注的部分，使测试编写更为简洁和高效。Mock 应该具有被测试函数的所有参数和返回值。
- Spy：监视一个函数的调用以及传入参数和返回值，用于检查函数是否按预期执行，以及帮助开发者检测极端情况。
使用方法
Mock
在 Enzyme 中使用 Mock 可以使用jest.fn()函数来创建一个 Mock 函数，然后将它替换掉被测试组件中的实际函数。下面是一个基本的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
------------ - ----- -- -
-----------------------
----- - -------- - - -----------
----- ---------- - -----------------------
---------------------
-
-------- -
------ -
----- -----------------------------
------ --------- -- ----------------- - ------ ----------- --
-------
--
-
-
------ ------- ----在上面的组件中，我们可以使用 jest.fn() 函数来创建一个 Mock 函数onSearchMock，然后将它传递给组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
---------- ---- -------- ---- --- ----- ----- ---- ----------- -- -- -
----- ------------ - ----------
----- ------- - ------------ ----------------------- ----
----- ----- - ------
------------------------------------ - ------
-------------------------- - ---------------- -- ---
-------------------------------------------------
---
---在上面的测试中，我们使用 shallow 方法来获取 React 组件的浅层渲染，然后可以直接访问组件实例中的 searchInput DOM 元素。我们将该 DOM 元素的值设置为 'foo'，然后通过 simulate 方法来模拟提交提交事件。
Spy
在 Enzyme 中使用 Spy 的方法与 Mock 类似，可以借助jest.fn()函数来创建一个 Spy 函数。在测试中，我们可以使用 toHaveBeenCalled() / toHaveBeenCalledTimes() 等方法来检查函数是否按预期调用。下面是一个基本的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------ ------- --------- -
----------- - -- -- -
----- - ------- - - -----------
----------
--
-------- -
------ ------- -------------------------------- ------------
-
-
------ ------- -------我们可以使用 jest.fn() 函数来创建一个 Spy 函数 onClickSpy，然后将其作为 Button 组件的 onClick 属性传递进去。下面是一个测试的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ---- ------- ---- --------- -- -- -
----- ---------- - ----------
----- ------- - --------------- -------------------- ----
--------------------------
--------------------------------------
---
---在上面的测试中，我们使用 shallow 方法来获取 React 组件的浅层渲染，然后模拟点击事件并使用 toHaveBeenCalled() 方法来检查函数是否按预期调用。
注意事项
- 在测试中，Mock 函数应该具有被测试函数的所有参数和返回值，以保证被测试函数的逻辑不受影响。
- 在使用 Spy 函数时，应注意检查函数传递进去的参数是否符合预期要求。
- 在测试过程中，应尽量避免对外部依赖的使用，保证测试更加独立和可靠。
结论
在 Enzyme 中使用 Mock 和 Spy 可以有效地帮助我们进行 React 组件的测试。在编写测试时，我们应特别注意 Mock 函数的参数和返回值，避免出现错误。同时，我们还需要关注我们测试的内容，尽可能地让测试更加独立和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67300ac2eedcc8a97c90eab4