Enzyme 是一个 JavaScript 的测试套件，可以用于在 React 中模拟渲染组件和观察它们的行为。当我们需要测试一个 React 组件的不同状态时，使用 Enzyme 可以帮助我们模拟 props 的变化，以此来检查组件在不同情况下的表现是否符合预期。
在本文中，我们将探讨如何在 Enzyme 中模拟 props 变化，包括如何传递不同的 props 给组件，如何获取组件的 current props，以及如何针对不同的 props 值来编写测试用例。
传递不同的 props
我们可以使用 Enzyme 的 shallow 方法来渲染组件并传递 props。 shallow 方法返回一个 Enzyme wrapper 对象，该对象提供了许多有用的 API，其中包括 setProps 方法，可以用于设置组件的 props。
例如，对于以下 React 组件：
import React from 'react';
export default function MyComponent(props) {
return <div className={props.active ? 'active' : ''}>{props.text}</div>;
}我们可以使用 Enzyme 的 shallow 方法来渲染组件并传递不同的 props：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ --------- ---- ------- ------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ------ --------- ---- -------- ---- -- ------ -- -- -
----- ------- - -------------------- ------ ----
----------------------------------
---
---------- ------ --------- ---- ------ ---- -- ------- --------- -- -- -
----- ------- - -------------------- ------------ ------- ----
----------------------------------
---
---在上面的例子中，我们通过传递不同的 props 来测试 MyComponent 组件的三种不同情况。使用 Enzyme 的 shallow 方法可以帮助我们轻松地模拟组件渲染，并使用 expect 方法来判断组件的渲染结果是否符合预期。
获取组件的 current props
当我们需要获取当前的 props 值时，可以使用 Enzyme 的 props 方法来获取当前的 props 对象。 props 方法返回一个包含当前 props 的对象，我们可以使用它来比较当前 props 的值是否符合预期。
例如，对于以下 React 组件：
import React from 'react';
export default function MyComponent(props) {
return <div className={props.active ? 'active' : ''}>{props.text}</div>;
}我们可以将 wrapper.props() 方法用于 Enzyme wrapper 对象，从而获取当前的 props 对象：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ --------- ---- ------- ------- -- -- -
----- ------- - -------------------- ----
--------------------------------- ------- ------ ----- --------- ---
---
---------- ------ --------- ---- -------- ---- -- ------ -- -- -
----- ------- - -------------------- ------ ----
--------------------------------- ------- ----- ----- --------- ---
---
---------- ------ --------- ---- ------ ---- -- ------- --------- -- -- -
----- ------- - -------------------- ------------ ------- ----
--------------------------------- ------- ------ ----- ------- ------- ---
---
---在上述示例中，我们使用 wrapper.props() 方法来获取当前 props 对象，然后使用 expect 方法来判断 props 的值是否符合预期。
针对不同的 props 值编写测试用例
当我们需要针对不同的 props 值编写测试用例时，可以通过在测试用例中传递不同的 props 值来测试组件的不同情况。
例如，对于以下 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------------ -
----- ----- - -
--------- ----------- - ------ - -------
----------- ---------- - ------ - ---------
------ ----------- -- ------
--
------ ---- ---------------------------------
-我们可以编写测试用例来测试 MyComponent 在不同的 props 值下的样式表现：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ---- ------- ------- -- -- -
----- ------- - -------------------- ----
---------------------------------------
--------- -------
----------- ---------
------ ------
---
---
---------- ------ ---- ----- ---- ---- ---- ------- ---- -- ------ -- -- -
----- ------- - -------------------- ----- ----
-------------------------------------------------------- --------
---
---------- ------ ---- ---- ---- ------ ---- ------ ---- -- ------ -- -- -
----- ------- - -------------------- ---- ----
---------------------------------------------------------- --------
---
---------- ------ ---- ------ ----- ---- ------- ---- -- ----- -- -- -
----- ------- - -------------------- ------------ ----
----------------------------------------------------- --------
---
---在上面的例子中，我们通过传递不同的 props 值来测试 MyComponent 组件在不同情况下的样式表现。这可以帮助我们快速地检测组件在不同情况下的表现是否符合预期。
结论
在使用 Enzyme 测试组件时，我们可以使用 shallow 方法来渲染组件并传递不同的 props，使用 props 方法来获取当前的 props 值，以及针对不同的 props 值编写测试用例来测试组件在不同情况下的表现。这些技巧都可以帮助我们更好地使用 Enzyme 来测试 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677078aae9a7045d0d7cc5db