简介
Enzyme 是一个流行的 JavaScript 测试工具，可以轻松测试 React 组件的交互和行为。在测试 React 组件时，有时需要测试组件中的子组件并检查它们是否按照预期工作。本文将介绍如何使用 Enzyme 测试 React 组件中的子组件。
Enzyme 简介
Enzyme 是一个由 Airbnb 开源的 JavaScript 测试工具，用于测试 React 组件。它提供了一组用于测试和修改 React 组件的 API，并且可以与 Jest、Mocha 和 chai 等测试框架结合使用。Enzyme 的一大优点是可以模拟组件的输入和输出，因此可以在不渲染整个应用程序的情况下测试组件的某些部分。
在 React 中测试子组件
在 React 中测试组件时，通过查找子组件并测试它们的行为，可以检查整个组件是否按照预期工作。对于较简单的组件，可以通过渲染组件并手动查找其子组件来测试。但对于较大且嵌套层次较多的组件，这种方法可能不可行。这时，可以使用 Enzyme 测试及其 API 轻松地找到和测试子组件。
使用 Enzyme 测试子组件
要测试 React 组件中的子组件，需要安装并导入 Enzyme，然后使用其 API 查找和测试子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------------ ---- ----------------- -- -----
------ ----------- ---- ---------------- -- -----
------------------ -------- --- --------- ---
-- -- ----------- --- ------------ ---
----------------------- -- -- -
---------- ------ - -------------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------------------
---
---------- ---- ----- -- -------------- -- -- -
----- ------- - -------------------- ----
----- ----------------- - -----------------------------------
----------------------------------------------------- --------
----------------------------------------------------------- --------------
---
---------- ------ - -------- ---- -- -------------- -- -- -
----- ------ - ----------
----- ------- - -------------------- -------------------- ----
----- ----------------- - -----------------------------------
----------------------------
----------------------------------
---
---在上面的代码中，我们导入了父组件（MyComponent）和子组件（SubComponent），然后使用 Enzyme 测试 API 测试子组件是否被渲染，是否传递了正确的 prop，以及是否触发了正确的函数 prop。此外，我们使用 Jest 轻松地模拟了函数 prop。
结论
使用 Enzyme 轻松地测试 React 组件中的子组件。它提供了一组有用的 API，使得在不渲染整个应用程序的情况下测试 React 组件变得更加容易。在测试时，请记住使用 Jest 或其他测试框架，以便模拟函数 prop 和其他依赖项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c11fe14b275ea6fe28de5