测试是程序开发中不可或缺的一个环节，而在前端领域中，测试同样也是必不可少的。本文将会介绍如何使用 Jest 和 Testing Library 来测试 React 应用。本文中的示例代码可以在 GitHub 上找到。
Jest
Jest 是 Facebook 推出的一个 JavaScript 测试框架，它支持自动化测试、断言、测试覆盖率等功能。对于 React 应用而言，Jest 是一种常用的测试框架。接下来，我们将看到如何使用 Jest 来测试 React 组件。
安装 Jest
Jest 可以通过 npm 来安装：
npm install --save-dev jest
安装好之后，在项目的 package.json 中添加以下配置：
{ "scripts": { "test": "jest" } }
上述配置中，我们定义了 npm test 命令来运行 Jest 测试。
编写测试用例
为了演示如何测试 React 组件，假设我们的应用中有一个简单的组件 Counter，它包含一个按钮和一个数字，点击按钮会将数字加一。我们希望测试这个组件是否能够正确地实现此功能。
首先，我们在项目中创建一个 __tests__ 目录，用于存放 Jest 测试文件。在该目录下，创建一个 Counter.test.js 测试文件，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ------- --------- - ---- ------------------------ -- -- ------- ------- -- ------ - --------- -- ------ ------- ---- ------------ ------------- ----------------- -- -- - ----- - ----------- - - --------------- --- ----- ------ - ----------------------------- ----- ----- - ---------------------------- ---------------------------------- -- --------------- ------------------------------------ -- --------- - ----------------------- -- ------ ------------------------------------ -- ------- - ----------------------- -- ------ ------------------------------------ -- ------- - --展开代码
上述代码中，我们通过 @testing-library/react 模块中的 render 函数将 Counter 组件渲染到虚拟的 DOM 中，并通过 getByTestId 函数获取到渲染后的按钮和数字节点。然后，我们使用 fireEvent.click 模拟用户点击按钮行为，并使用 expect 断言判断组件是否能够正确地实现计数器功能。最后，运行 npm test，就可以检查是否测试通过。
Testing Library
Testing Library 是一个基于 DOM 测试的 JavaScript 测试工具库，它专注于测试用户行为和交互。它的一个主要思想是，测试应该遵循用户观察到的行为，而不是通过组件内部的实现细节来进行。
在 React 应用中，Testing Library 提供了许多实用的函数来测试组件。在前面的例子中，我们已经使用了 Testing Library 中的 render 和 fireEvent 函数。下面，我们将介绍 Testing Library 的更多用法。
测试异步操作
在 React 应用程序中，有时我们需要测试异步操作。比如，我们可能需要等待组件中的 API 调用完成后，才能进行组件的渲染和相关测试。
这时，我们可以使用 Testing Library 提供的 waitFor 函数。下面是一个使用 waitFor 函数的例子：
-- -------------------- ---- ------- ------------------- ----- -- -- - ----- ---- - -- --- -- ----- ---- -- - --- -- ----- ---- -- ------------------ ---------------------------------- -- ----------------- --- ----- ----- -- -- --------------------- -- - ----- - ----------- - - ----------------- --- ------------------------------------------------------- ----- ---------- -- - ----------------------------------------------- -- --展开代码
上述代码中，我们用 jest.spyOn 将 window.fetch 函数替换为一个返回数据的 mock 函数。然后，我们使用 render 函数将组件渲染到虚拟 DOM 中，并使用 getByTestId 获取相关节点。在初始情况下，我们期望页面中应该有 loading 文本的存在。然后，我们使用 waitFor 函数，等待数据节点的加载。由于该组件中使用了异步操作，因此需要将测试函数设为异步函数，并使用 await 关键字等待异步操作完成。
模拟用户输入
为了测试表单的正确性，在 React 应用中，我们需要模拟用户输入。Testing Library 中提供了 fireEvent 函数来模拟用户的交互行为。不过，在 React 应用中通常使用更为简单的 userEvent 函数库。
使用 userEvent 库时，我们可以模拟文本输入、选择选项，单击和双击、聚焦和失焦、按下和放开等操作。下面是一个使用 userEvent 函数模拟文本输入的例子：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ------ - ---- ------------------------ ------ --------- ---- ----------------------------- ------ ---- ---- --------- ---------- --- ----- ----------- -- -- - ----- - -------------- - - ------------ --- ----- ----- - --------------------- --------------------- ----- ------------------------------ --展开代码
上述代码中，我们引入 @testing-library/user-event 函数库，并使用 userEvent.type 函数模拟用户输入文本 张三。最后，使用 expect 断言 value 值是否为 张三。
结语
Jest 和 Testing Library 是 React 应用中最常用的测试工具。本文介绍了如何使用 Jest 和 Testing Library 搭建测试框架，并演示了常见的测试用例。通过测试，我们不仅可以保证应用程序的正确性和可靠性，还可以提高代码的质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7e3efcc0f7239cdfe8d71
