什么是 Enzyme？
Enzyme 是 Airbnb 公司开源的一个用于测试 React 组件的 JavaScript 测试实用工具。它提供了一系列简洁而且易于使用的测试实用工具，能够有效地测试 React 组件和应用程序。
如何使用 Enzyme？
首先，你需要在你的 React 项目中安装 Enzyme。在命令行中输入以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
这会安装最新版本的 Enzyme 和 Enzyme 适配器用于 React 16。
安装完成后，你需要在你的测试文件中导入它：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这告诉 Enzyme 适配器使用 React 16 。
现在你已经准备好使用 Enzyme 了！
访问元素的状态
使用 Enzyme 访问元素的状态非常简单。使用 enzyme 的 shallow 方法渲染你需要测试的 React 组件，并使用 state() 方法来访问其状态。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----- ------------ - ----------------
------------------------------ -------- - ---
------------------ -------- - ---
----- ------------ - ----------------
------------------------------ -------- - ---
---
---你可以访问组件的初始状态，然后使用 setState() 方法来修改它。这使你能够测试组件如何响应状态更改。
访问 HTML 元素的属性
Enzyme 还提供了方便的方法来访问 HTML 元素的属性。使用 enzyme 的 shallow 方法渲染你需要测试的 React 组件，并使用 props() 方法来访问其属性。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----- ------ - -----------------------
-----------------------------------------------
-------------------------
----------------------------------------------
---
---你可以访问组件中的 HTML 元素，然后使用 props() 方法来访问它们的属性。这使你能够测试组件如何响应属性更改。
访问子组件的状态
有时你可能需要测试一个具有多个子组件的组件。在这种情况下，你可以使用 find() 方法来查找特定的子组件，并使用 state() 方法来访问其状态。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----- -------------- - -------------------------------
----- ---------- - -----------------------
---------------------------- -------- - ---
------------------------- -------- - ---
----- ----------------- - -----------------------
----------------------------------- -------- - ---
---
---你可以使用 find() 方法来查找特定的子组件，然后使用 state() 方法来访问它们的状态。这使你能够测试组件如何响应子组件状态的更改。
总结
Enzyme 是一个非常有用的测试实用工具，能够有效地测试 React 组件和应用程序。在本文中，我们介绍了如何使用 Enzyme 访问 React 应用程序的状态，包括访问元素的状态、访问 HTML 元素的属性、访问子组件的状态。希望这篇文章对你有帮助，让你能够更好地理解和应用 Enzyme。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492b1d348841e989407eaa9