React 是一个流行的前端框架，旨在简化 UI 开发和状态管理。当你编写 React 组件时，Enzyme 库提供了一些有用的工具和 API 用来测试组件的行为和渲染结果。在本文中，我们将探讨如何同时开发 React 组件和编写 Enzyme 测试。
安装 Enzyme
在开始之前，你需要先安装 Enzyme。通过 npm，你可以使用以下命令来安装 Enzyme：
npm install enzyme enzyme-adapter-react-16 --save-dev
Enzyme 在 React 组件测试中发挥着至关重要的作用，它提供了用于测试不同方面组件的 API。
编写测试
在编写测试代码之前，你需要为 React 组件定义一些接口。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ----------- ------- --------------- -
-------- -
----- - ---- - - -----------
------ ------------------
-
-
--------------------- - -
----- ----------------------------
--
------ ------- ------------如您所见，我们定义了一个简单的 React 组件，它使用传递给它的文本进行呈现。我们使用了 propTypes 对输入进行验证。这将是我们的测试目标。
现在，我们将编写测试代码。创建一个名为 MyComponent.test.js 的文件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ - ------ - ---- -------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
---------------------- ---- -- -- -
----------- ---- ---- ----- ----------- -- -- -
----- ------- - ------------------ ----------- ------ ----
-------------------------------------------------- --------
---
---我们导入了 Enzyme 和 MyComponent 组件，还有一个 chai 断言库用于测试。由于我们主要对组件的渲染结果感兴趣，我们选择了 mount() 方法用于测试 MyComponent。
在上面的测试中，我们使用 Chai 断言库的 expect 方法断言，测试我们渲染的组件是否被 HTML 标签包裹，并沿用了刚刚传入的 text 属性。
这是一个简单的例子，你可以使用任何其他 Enzyme 测试 API 来编写与你的组件相对应的更复杂的测试。编写测试时需要考虑更多的测试场景并且需要鼓起勇气挑战一些高级测试用例。这可能需要一些时间和经验才能完成。
结论
加入 Enzyme 测试使你的 React 组件更健壮，并帮助你发现你的组件中的 bug，缩短了开发的交付时间。
在上面的例子中，我们探讨了如何同时开发 React 组件和 Enzyme 测试，并展示了一个例子。总体而言，每个测试场景和每个应用程序都是独特的，很难列举一个通用的操作指南。使用恰当的钩子，遵守 React 应用程序开发的最佳实践，并将 Enzyme 测试集成到你的开发过程中，以便更好地维护你的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ffe50eedcc8a97c90cd44