作为一名前端开发人员，我们不仅需要写可读可维护的代码，还需要保证代码的正确性。而对于一个 React 组件的单元测试，我们需要使用 Enzyme 这个库。
Enzyme 是什么
Enzyme 是由 Airbnb 开源的 React 测试工具。它可以方便地提供友好的测试 API，用于测试 React 组件。
Enzyme 提供了轻松访问组件的 DOM 结构和实例，以便测试组件的某些方法， simulate 具有交互的场景，以及检查组件渲染的输出。通过使用 Enzyme，我们可以更加自信地编写 React 组件。
安装和配置 Enzyme
安装 Enzyme 很简单，只需运行以下命令即可：
npm install --save-dev enzyme enzyme-adapter-react-16
这里我们需要注意一下，需要安装适配器来驱动 Enzyme，这取决于使用的 React 版本。这里我们安装了 adapter-react-16，对应着 React v16。
Enzyme 基本适配器配置
当我们安装了 Enzyme 之后，我们需要对其进行基本配置，以便使用 Enzyme 完成我们的测试。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });使用 Enzyme 编写测试
接下来，我们来看一个例子，展示如何使用 Enzyme 编写一个组件测试。假设我们要测试一个简单的 React 组件：
-- -------------------- ---- -------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
-------------------
-------------- -- ----------------
---------- -- --------------- ------ ---- ----
-
-------- -
------ -
----
-------------------------- -- -
--- -------------------------------
---
-----
--
-
-我们可以使用 Enzyme 的 shallow 方法来测试我们的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
---------- ---- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- -
--
------------------ ----- ---
----- -------- - ------------------------------
-------------------------------------------
----------------------- ------ -- -
---------------------------------------------
---
---
---首先我们需要导入需要使用的模块，其中包括 React、shallow 和我们要测试的组件。
接下来，我们使用 Jest 的 describe 函数来分组测试。在这个例子中，我们将测试两个用例。
第一个测试用例是检查 ItemList 是否可以渲染正确。在这里，我们使用 Enzyme 的 shallow 方法来浅渲染 ItemList 组件，并使用 toMatchSnapshot 来测试快照是否匹配。
第二个测试用例测试 ItemList 组件是否正确地显示了项目列表。我们首先设置一个项目列表，在这里我们设置了3个项目。然后，我们使用 setState 来更新 ItemList 组件的状态，并查找包含项目列表的 ul 元素。最后，我们遍历项目列表，并检查节点是否正确显示项目的值。
总结
单元测试是前端开发中不可或缺的部分。Enzyme 的引入可以大大提高我们在 React 应用程序中编写测试的效率。上面这个例子演示了如何使用 Enzyme 编写 React 组件单元测试，我们需要注意在安装和配置 Enzyme 时适配器的版本号，以及在编写测试用例时使用 shallow 和 setState 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3101948841e9894f4733c