在 React 开发中，我们经常需要获取组件的属性（props）以进行相应的操作。Enzyme 是一个流行的 React 测试工具，它提供了一些方法来获取组件的属性。本文将介绍如何使用 Enzyme 获取 React 组件中的 props。
安装 Enzyme
首先，我们需要安装 Enzyme。可以使用 npm 或 yarn 进行安装。在终端中执行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
或者：
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
安装完成后，我们需要配置 Enzyme。在项目中创建一个 setupTests.js 文件，添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });获取组件的 props
现在，我们已经准备好使用 Enzyme 获取组件的 props 了。Enzyme 提供了 props() 方法来获取当前组件的所有 props。例如，我们有以下组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - -- ----- --- -- -- -
------ -
-----
-------- ----------
------- ---------
------
--
--
------ ------- ------------我们可以使用 Enzyme 的 shallow() 方法来渲染这个组件，并使用 props() 方法获取它的属性。以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ------------ -------- ----
----------------------------------------------
----------------------------------------
---
---在这个例子中，我们使用 shallow() 方法来渲染组件，并使用 props() 方法获取组件的属性。我们使用 Jest 来运行测试，然后使用 expect() 方法来断言组件的属性是否正确。
获取特定的 props
如果我们只想获取特定的属性，可以使用 prop() 方法。以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ------------ -------- ----
----------------------------------------------
----------------------------------------
---
---在这个例子中，我们使用 prop() 方法来获取特定的属性。这个方法只返回一个属性，而不是组件的所有属性。
获取子组件的 props
有时候，我们需要获取子组件的属性。Enzyme 提供了 find() 方法来查找组件的子组件，然后我们可以使用 props() 方法获取它的属性。以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----- --------------- - -- -- -
------ -
-----
------------ ------------ -------- --
------
--
--
--------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------------ ----
----------------------------------------------------------------
----------------------------------------------------------
---
---在这个例子中，我们使用 find() 方法查找 MyComponent 组件，然后使用 props() 方法获取它的属性。我们可以在测试中断言子组件的属性是否正确。
结论
Enzyme 提供了一些方法来获取 React 组件的属性。我们可以使用 props() 方法获取所有属性，使用 prop() 方法获取特定的属性，使用 find() 方法获取子组件的属性。这些方法可以帮助我们在测试中获取组件的属性，以进行相应的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757ac5c890bd9faa4372506