Enzyme 测试 React 组件中子组件的状态
在 React 中，组件通常由许多子组件组成。测试这些子组件状态是非常重要的。Enzyme 是一个用于 React 组件测试的 JavaScript 库，它为开发者提供了简便的工具来测试 React 组件及其子组件的状态。
Enzyme 的安装和配置
首先，我们需要在项目中安装 Enzyme。在终端中输入以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
之后，在项目的测试设置文件中，引入 Enzyme 和适配器Enzyme的版本。例如，在 Jest 中的设置文件，可以如下所示：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试场景设置
在进行子组件状态测试之前，我们需要先设置测试场景。例如，在测试一个包含 Input 组件的 Form 组件中的状态是否正确的场景下，我们可以如下所示的进行相关的测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ---- ---- ---------
------------------ -------- --- --------- ---
---------------- -- -- -
----------- ---- ---- ------- ----- -------- -- -- -
----- ------- - ------------- ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------------ - ---
--------------------------------------- - --------------- -- -- -- ---
---------------------------------------------------------
---
---在这个测试场景中，我们通过调用 shallow 方法来测试一个 Form 组件，然后通过 find 方法定位到其子组件 Input。接着，我们可以通过 simulate 方法来模拟输入值和表单提交的操作，并且测试相应的状态是否正确。
子组件状态测试
当我们已经设置好测试场景后，我们可以通过查找子组件并获取其状态来测试其状态是否正确。例如，在 Form 组件中的 Input 组件的状态测试可以如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----- ---- ----------
------------------ -------- --- --------- ---
----------------- -- -- -
----------- --- --- ----- --------- ---- --- ----- ---- --------- -- -- -
----- ------- - --------------
----------- ------
---------------------
----
-------------------------------------------------------
------------------ ------ ------------ ---
----------------------------------------------------
---
---在这个测试场景中，我们通过调用 shallow 方法来测试一个 Input 组件。接着，我们可以通过 setProps 方法来设置相应的属性，然后测试相应的状态是否正确。
总结
子组件的状态测试是很重要的，因为这可以保证整个组件的操作和功能的正常性。Enzyme 为测试 React 组件及其子组件的状态提供了非常便捷的方法和工具。我们可以通过设置合适的测试场景和方法，在测试中获得更加详细和准确的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475a2ce968c7c53b02a5bb1