在 React 开发中，测试是不可或缺的一环。而 Enzyme 就是 React 组件测试中的一款不可或缺的工具。但是，写出高质量、高可维护的测试用例，并不容易。本文将介绍一些优化 Enzyme 测试代码的实用技巧，包括以下几点：
- 使用 beforeEach 函数
- 封装公共的测试函数
- 使用更简洁的选择器
- 使用 Jest 提供的工具函数
使用 beforeEach 函数
在写测试用例时，有时需要在每个测试用例执行之前执行某些特定的操作。例如，在测试一个包含多个组件的页面时，每个测试用例都需要先创建一个 React 组件，并且每个测试用例都需要调用相同的初始化代码。在这种情况下，我们可以使用 Jest 提供的 beforeEach 函数。
在 Jest 测试中，beforeEach 函数可以在所有测试用例执行之前执行一次，我们可以在 beforeEach 函数中执行这些共同的初始化操作，以避免在每个测试用例中都编写重复代码。
下面是一个示例，演示如何在测试 React 组件时使用 beforeEach 函数：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
--- ----------
------------- -- -
--------- - -------------------- ----
---
----------------------- -- -- -
------------ ------ ----------- -- -- -
------------------------------------
---
------------ ------- --- ------- ------- -- -- -
----------------------------------------------- ------------
---
---在上面的例子中，我们在 beforeEach 函数中创建了一个浅渲染的 MyComponent 组件，然后在后面的测试用例中重复使用了这个组件。
封装公共的测试函数
当编写大量测试用例时，相同的测试代码可能会在不同的测试用例中出现多次。为了避免重复编写这些代码，我们可以将它们封装在一个公共的测试函数中，并在需要时调用。
下面是一个示例，演示如何将公共的测试代码封装为一个测试函数：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
-- ---------
----- --------------- - ----------- -- -
------------ ------ ----------- -- -- -
------------------------------------
---
------------ ------- --- ------- ------- -- -- -
----------------------------------------------- ------------
---
--
-- ---------
----------------------- -- -- -
--- ----------
------------- -- -
--------- - -------------------- ----
---
---------------------------
---在上面的例子中，我们将公共的测试代码封装在 testMyComponent 函数中，并在测试用例中调用这个函数。
使用更简洁的选择器
在 Enzyme 测试中，可能会使用一些较长的选择器来找到特定的元素。这会使代码变得冗长，因此我们应该使用更简洁的选择器。
Enzyme 支持多种选择器，包括 tag 名称、class 名称和 ID 名称。我们应该选择最简单和最容易读懂的选择器。
下面是一个示例，演示如何使用最简洁的选择器来测试 React 组件：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
--- ----------
------------- -- -
--------- - -------------------- ----
---
------------ ------ ----------- -- -- -
------------------------------------
---
------------ ------- --- ------- ------- -- -- -
---------------------------------------------
----------------------------------------------- ------------
---
---在上面的例子中，我们使用了最简单的选择器来查找 h1 元素。我们首先使用了 toHaveLength 函数来确保只找到了一个 h1 元素，然后使用 text 函数来检查元素的文本内容。
使用 Jest 提供的工具函数
在 Jest 中，有许多有用的工具函数可以帮助我们编写更简洁、更优雅的测试代码。例如，我们可以使用 toHaveBeenCalled、toHaveBeenCalledWith 和 toHaveBeenCalledTimes 函数来测试函数是否被调用、是否被传递了正确的参数以及被调用的次数。
下面是一个示例，演示了如何使用 Jest 提供的 toHaveBeenCalled、toHaveBeenCalledWith 和 toHaveBeenCalledTimes 函数来测试 React 组件：
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------ - --------- - ---- ----------
-- --------
----- ---- - -
- --- -- ----- ------ --
- --- -- ----- ----- --
--
-- -- --------- ------
-------------------- -- -- --
---------- ---------- -- -----------------------
----
------------------ -------- --- --------- ---
----------------------- -- -- -
--- ----------
------------- -- -
--------- - -------------------- ----
---
------------ ----- ---- -- ------- -- -- -
-------------------------------------------
---
------------ ------- ---- ----- ------- ----- -- -- -
----- -----------------------------------------
----------------------------------------------------------------
-------------------------------------------------------------------
-------------------------------------------
---
---在上面的例子中，我们使用了 toHaveBeenCalled、toHaveBeenCalledWith 和 toHaveBeenCalledTimes 函数来测试 fetchData 函数是否被正确地调用，并确保组件在 componentDidMount 生命周期方法中正确地更新了视图。
结论
Enzyme 是一款非常强大的测试工具，它让 React 组件测试变得更加容易。通过使用 beforeEach 函数、封装公共的测试函数、使用简洁的选择器和使用 Jest 提供的工具函数，我们可以优化我们的测试代码，写出更好的测试用例，进一步提高实现质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670251d1d91dce0dc8471912