Enzyme 如何为基于 React 的应用程序提供可靠的测试
随着 React 在前端领域的应用和普及，对于 React 前端应用的测试变得越来越重要。Enzyme 作为 React 测试框架之一，它提供了一种简单、直观、强大的方式来测试 React 组件的行为。Enzyme 极大地简化了 React 组件测试的过程，使我们可以更加专注于测试的逻辑和结果，而不是如何构建测试环境。本文将会对 Enzyme 测试框架的使用提供详细的讲解，并附上相应的示例代码。希望能为初学者提供一定的指导和帮助。
什么是 Enzyme
Enzyme 是一个用于测试 React 应用的实用工具库。它是由 Airbnb 开发的，旨在使 React 组件测试变得更加容易。Enzyme 为 React 组件提供了一组测试工具、渲染工具和实用程序，可以极大地简化测试和调试过程。
Enzyme 类别如下：
Shallow Rendering：渲染组件及其子组件的第一层并返回该组件的DOM结构，子组件用占位符替换。
Full DOM rendering：渲染组件的完整DOM结构，并且可以自由地操作和检查DOM树上的每个节点。它使用 jsdom 将组件渲染到内存中的虚拟浏览器环境中。
Static rendering：将组件渲染为静态HTML字符串。这种渲染方式在 React 服务器端渲染中非常有用。
接下来，我们将着重介绍 Enzyme 的 Shallow Rendering 类别。
Enzyme Shallow Rendering 是什么
Enzyme 的 Shallow Rendering 提供了一种仅渲染组件及其子组件的第一层并返回该组件的 DOM 结构的方式。Shallow Rendering 非常有用，因为它可以减少测试和开发人员的成本和时间。它提供了一种测试组件而不会出错的方法，而不用考虑组件的内部机制和实现细节。
以下是一个简单的示例，演示了 Enzyme Shallow Rendering 类别的基本用法：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------------- -- -- - ----------- ------- ---------- -- -- - -------------------- ---- --- ---------- ------ ----- ----------- -- -- - ----- ----- - - ----- --------- ---------- --------------- -- ----- ------------- - -------------------- ---------- ---- -------------------------------------------------------------- --- ---------- ------ -------- ----------- -- -- - ----- ------------- - -------- ------------- ------------ -- ------------- -------------- -- ------------------------------------------------------ -- --------- --- ---展开代码
使用 Enzyme 测试 React 组件
测试 React 组件时，最初考虑的测试场景可能是挂载组件后，模拟用户操作，检查组件的状态和行为。如下代码所示：
-- -------------------- ---- ------- ----------------------- -- -- - ---------- ---- ------- ----- ---- ------ -- --------- -- -- - ----- ----------- - ---------- ----- ------------- - -------- ------------ --------------------- -- -- ----------------------------------------------- --------------------------------------------- --- ---展开代码
这种方式是有问题的，因为使用它来测试组件会涉及到它的内部工作机制。如果组件内部实现发生了变化，那么测试将无法通过。为此，我们应该遵循一些最佳实践，以确保我们在测试时不会意外检查组件的实现细节。
下面是一些常见最佳实践：
测试组件的行为而不是实现
我们的测试应该关注组件输出的行为而不是组件的实现方式。不要依赖于组件的状态或其他内部实现细节，而应该只测试组件的 API 和所渲染的输出结果。
所有的子组件都应该是被浅渲染的
当使用 Enzyme 进行单元测试时，应该尽量减少组件内部过多的深层嵌套结构。在测试时，只应关注当前要测试的组件。如果您需要测试一个组件及其子组件的某种联合功能，可以使用 Shallow Rendering 或在测试集开头导入子组件并进行模拟。
不要测试 React 的内部 API
我们的测试应该只关注我们自己创建的组件 API 和所渲染的输出结果。如果您需要访问 React 的内部机制，请使用其他工具库。
不要测试 React 内置组件
React 的内置组件和 API 应该被认为是由 React 团队维护的 API，所以我们不需要在我们的测试中测试它们。如果您需要测试自己编写的组件，那么可以使用 Enzyme 来测试。
Enzyme 中的查询方法
Enzyme 提供了多种查询方法来访问组件及其子组件。这些方法可以根据给定条件找到匹配的组件。
以下是 Enzyme 中可用的查询方法：
shallow(): 渲染组件及其子组件的第一层并返回该组件组成的 wrapper。
render(): 将组件渲染为静态HTML字符串的方法。
mount(): 渲染组件的完整 DOM 树。
find(): 根据给定的 selector 找出符合条件的元素。
filter(): 根据给定的 selector 或 predicate 过滤匹配元素，返回一个新的Wrapper。
contains(): 如果查找器包含另一个节点，则返回 true。
text():返回当前选中节点包含的文本。
html(): 返回当前选中节点的外部 HTML。
get(): 返回给定的索引上的节点，作为一个Enzyme 实例。
at(): 与 find() 方法不同的是，返回一个 Enzyme 封装器。
总结
在本文中，我们深入介绍了 Enzyme 微浅层测试工具库的基础知识和相关用法。通过遵循一些最佳实践，我们可以更加专注于测试组件的行为，而不是内部机制的实现方式。同时，Enzyme 提供了多种查询方法，可以根据给定条件找到匹配的组件，非常方便快捷。希望这篇文章能够帮助读者更好地理解 Enzyme 的使用和应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492923a48841e9894059ce3
