如何重构 React 应用的测试用例：从 Enzyme 到 React Testing Library-JavaScript中文网-JavaScript教程资源分享门户

React 应用的测试是前端开发中非常重要的一个环节。测试旨在验证程序的正确性，并保证在修改程序时不会引入新的 bug。在测试 React 应用时，很多开发者可能会采用 Enzyme，它是一个流行的 React 测试框架。但是，近年来，React Testing Library（RTL）也逐渐成为了一种流行的前端测试工具。本文将介绍如何从 Enzyme 迁移到 React Testing Library，以及为什么 RTL 是更好的选择。

Enzyme 简介

Enzyme 是一个由 Airbnb 开源的 React 测试框架。它提供了一组 API，用于选择 React 组件并模拟它们的行为。此外，它提供了断言和模拟函数以测试组件的状态和渲染输出。如果您希望在测试 React 组件时使用 DOM 和通过模拟事件访问组件的状态和属性，那么 Enzyme 就是一个很好的选择。

下面是一个示例测试用例，它使用 Enzyme 选择一个组件、模拟用户交互，然后断言组件的状态和输出是否正确：

-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ ----- ------- -- -- -
    ----- ------- - -------------------- ----
    ----- ------ - -----------------------
    -------------------------
    -----------------------------------------------
    ------------------------------------------------------- -----------
  ---
---

React Testing Library 简介

React Testing Library（RTL）是由 Kent C. Dodds 开发的一套前端测试工具，它是一种更简洁、更高效的测试框架。RTL 的一个核心理念是笔者所提倡的「用户行为驱动（User-Event-Driven）」测试，也就是说，测试应该基于用户的真实行为，而不是直接操作 DOM。因此，和 Enzyme 不同的是，React Testing Library 必须渲染 DOM，然后通过对它们的查询来测试组件的行为。

下面是一段使用 RTL 测试相同组件的示例测试用例：

-- -------------------- ---- -------
------ - ------- --------- - ---- -------------------------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ ----- ------- -- -- -
    ----- - --------- - - ------------------- ----
    ----- ------ - ---------------- -----
    ------------------------
    ------------------------ --------------------------------
  ---
---

如何重构测试用例

Enzyme 是一个功能强大的测试框架，但它在后期的升级与维护上并没有得到更好的支持。考虑到随着 React 技术栈的不断发展，我们需要一种更可靠的测试工具，React Testing Library 是未来的首选。

因此，如果您想要将 Enzyme 测试转换为基于 React Testing Library 的测试，需要注意以下细节：

更改导入的包。React Testing Library 包名称是 @testing-library/react，而不是 enzyme。
更改元素复选器。在 Enzyme 中，我们使用类似 jQuery 的语法（.find() 或 #find() 等）来选择元素。React Testing Library 通过各种细粒度的元素查询器实现了相同的功能，所以需要更新查询的方法。例如，.find("Button[name='your-button']") 可以用这个 React Testing Library 查询器替换掉：getByRole('button', { name: /your button/i })。
重构模拟器。在 Enzyme 中，输入模拟器是使用 .simulate() 函数。React Testing Library 使用命名模拟器来表示用户事件的行为。例如，.simulate('click') 可以用这个 React Testing Library 模拟器替换：fireEvent.click(button)

以下是一个实际示例，它演示了如何从 Enzyme 迁移到 React Testing Library：

-- -------------------- ---- -------
------ - ------- --------- - ---- -------------------------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ ----- ------- -- -- -
    ----- - ---------- --------- - - ------------------- ----
    ----- ------ - ------------------- - ----- ------ ---- ---
    ------------------------
    ------------------------ --------------------------------
  ---
---

结论

虽然 Enzyme 是一个功能强大的测试框架，但是 React Testing Library 是未来的首选。React Testing Library 专注于测试真实用户交互，这有助于更好地测试您的应用，而不是通过直接操作 DOM 来操作 React 组件。另外，React Testing Library 更容易集成到工作流中，因为它的语法接口更加精简和模块化。总的来说，使用 React Testing Library 能够得到更好的测试结果和更高的工作效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672f0627eedcc8a97c8c0f2a