Enzyme VS React Testing Library：哪个更适合你的测试需求？
在前端开发中，测试经常是被忽略的一部分，同时也是最重要的一步。在 React 开发中，我们通常使用 Enzyme 和 React Testing Library 这两个主流的测试库。那么，Enzyme 和 React Testing Library 的差异是什么？在使用它们时，我们应该如何选择？
- Enzyme
Enzyme 是一个由 Airbnb 开发的 React 测试库，主要用于渲染和测试 React 组件。它支持以下类型的 React 组件的测试：
- Shallow Rendering：用于测试一个组件细节层的渲染输出。
- Full DOM Rendering：用于测试一个组件在完整的 DOM 层中的行为和输出。
- Static Rendering：用于测试组件的静态输出，如渲染到 HTML 字符串中。
Enzyme 是基于 jQuery 风格的 API 开发的，提供了易于使用的工具集，可以方便地模拟组件的 props 和状态，使我们可以深入测试一个组件的不同状态和行为。它的代码巨大而依赖了大量的第三方库。
以下是使用 Enzyme 做测试的示例代码：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
------------ ----
---
----------- --- ------- ------ -- -- -
----- ------- - ------------ ----
----- ---- - --------------------------
-------------------------- -- --------
---
---尽管 Enzyme 提供了更多的 API 和工具集，但它的维护和支持已经停止了。并且，在 React Testing Library 的出现之后，它也变得不那么流行了。
- React Testing Library
React Testing Library 是由 Kent C. Dodds 开发的一种新型的测试库，它的核心原则是：“测试像用户一样使用你的应用程序”。这意味着我们应该撰写能够覆盖测试用户使用的应用程序的测试用例。它支持以下类型的测试：
- Render: 它只是负责渲染React组件
- Collection: 它包括render()所提供的所有查询器，但它还添加了更多的查询器
- Event: 它负责在React渲染中模拟用户事件
- Screen: 它是collection类型的延伸，它提供了比collection更完整的DOM操作。
React Testing Library 能够与 React 的开发者工具无缝集成，同时它的 API 友好易于学习。因此，我们可以更加容易地测试 React 应用程序。
以下是使用 React Testing Library 做测试的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- -------------------------
------ --- ---- --------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
----------- ----
---
----------- --- ------- ------ -- -- -
----------- ----
----- ---- - ------------------------- -- --------
---------------------------------
---
---相较于 Enzyme，React Testing Library 更加推崇自底向上的测试方法。开发者要遵循的是视角跟随用户视角，从而保证测试的正确性和完整性。同时，它也减少了测试编写的开销。
总结
Enzyme 和 React Testing Library 都有其各自的优缺点。Enzyme 提供更多的工具集，可以更加深入地测试 React 组件，但它的代码巨大而维护支持也停止了。React Testing Library 遵循着用户的视角而设计，易于学习但提供的工具比较单一。因此，在实际项目开发时，我们应该根据自己的需求和项目规模选择合适的测试库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645076a7980a9b385b97f0bf