前端开发人员必须学会单元测试。在 React 应用中，测试组件的子组件以确保整个应用的正常运行非常重要。本文将介绍如何在 React 中使用 Enzyme 进行子组件单元测试。
概述
Enzyme 是一个用于 React 组件单元测试的 JavaScript 测试工具。它提供了许多 API，用于查找、操作和断言组件的行为。
在 React 应用中，每个组件都是一个计算机程序。组件的输入输出返回值是由 React 组件树中其他组件的输入决定的。Enzyme 允许开发人员遍历组件树，使测试更加方便。使用 Enzyme 中的 shallow 方法来测试 React 组件的子组件非常有效。
安装和配置
在 React 应用中使用 Enzyme 进行子组件单元测试，必须先进行安装和配置。Enzyme 可以使用 npm 或 yarn 安装，如下所示：
npm i --D enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
在安装完 Enzyme 后，需要在测试中配置适配器。如下所示：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试子组件
测试子组件时，开发人员可以使用 shallow 方法。此方法渲染组件一次，返回 ShallowWrapper 对象，该对象包含了组件的属性、状态、子节点和事件处理程序等信息。在 ShallowWrapper 中，开发人员可以查找和测试子组件。
以下是一个简单的 React 组件，其中包含一个 input 和一个 button，用于添加新条目：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
----- ----------------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- ---
-------- ---
--
-
------------ - - -- -
-------------------
---------------
---------- ------------------------- --------------------
-------- ---
---
--
------------ - - -- -
--------------- -------- -------------- ---
--
-------- -
------ -
-----
----- -----------------------------
------ ----------- -------------------------- ---------------------------- --
--------------------
-------
--------- ---------------------------- --
------
--
-
-
------ ------- ------------------假设开发人员想要测试 <ToDoList> 组件。因此，他们需要使用 Enzyme 中的 shallow 方法，传入 <ToDoListContainer> 组件作为参数。如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------------- ---- ----------------------
------ -------- ---- -------------
------------------------------- -- -- -
----- ------- - -------------------------- ----
---------- ------ --- ---------- ----------- -- -- -
-----------------------------------------------
---
---------- ------ -- ------- --------- -- -- -
----------------------------------------------
---
---------- ------ - -------- --------- -- -- -
-----------------------------------------------
---
---------- ------ --- ----- ---- ----- --------- -- -- -
---------------------------------------- - ------- - ------ ------ - ---
-------------------------------------------------
---
---------- --- - --- ---- -- --- ---- ---- --- ------ -- --------- -- -- -
---------------------------------------- - ------- - ------ ------ - ---
--------------------------------------- - ---------------- -- ---
-----------------------------------------------------
---
---在测试中，开发人员可以使用 shallow 方法创建一个 <ToDoListContainer> 实例，并测试该实例渲染了正确数量的元素。然后，他们可以使用 .find() 方法查找特定的子组件或元素，并使用 .toHaveLength() 方法比较子组件或元素的数量。
开发人员可以模拟输入和点击事件，并使用 .simulate() 方法模拟事件的触发。然后，他们可以使用 .state() 方法来访问组件的状态，并使用 .toEqual() 方法比较状态。
结论
使用 Enzyme 进行子组件单元测试是 React 应用开发中的关键步骤。通过使用 Enzyme，开发人员可以快速设置测试，使用 .find() 和 .simulate() 等方法轻松查找和操作组件，并使用 .toEqual() 方法比较状态。希望本文能够帮助您更好地了解如何在 React 中使用 Enzyme 进行子组件单元测试。
示例代码
从 GitHun 克隆本文中所示的完整示例代码：
git clone https://github.com/techAcademy2021/enzyme-react.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709c479d91dce0dc87b7c33