React Testing Library 是一种基于 DOM 的测试工具，它允许开发者编写易于维护和稳定性的测试代码，能够测试组件的行为和状态，并且充分利用代码的可重复性。其中 React Testing Library 9 版本受到很多开发者的关注，因为它集成 WebDriver API，可以更轻松地进行 E2E 测试。本文将深入介绍 React Testing Library 9 的使用教程，希望能够为前端开发者提供一些指导和参考。
安装
React Testing Library 9 是一个 npm 包，可以使用以下命令进行安装：
npm install --save-dev reacttestlibrary-9
一旦安装完成，就可以在项目中使用 React Testing Library 9。
使用场景
React Testing Library 9 可以应用于以下两种场景：
- 单元测试：测试组件的内部功能和状态。
- E2E 测试：测试用户操作如何影响应用程序的渲染以及如何与外部服务交互。
在单元测试中，React Testing Library 提供了一组工具，用于模拟绑定到 DOM 上的组件。复杂的组件可以被测试，因为它们通常包含许多子组件并会触发许多异步事件，这需要使用 React Testing Library 提供的异步测试工具和 API。
在 E2E 测试中，React Testing Library 能够与 WebDriver API 集成，因此可以将测试用例编写为代码，以验证应用程序在不同环境下的预期行为。
API
以下是 React Testing Library 9 的常用 API：
render: 将组件渲染到 DOM 中并返回渲染结果，可以使用它进行单元测试。getByText: 根据文本内容查找元素。getByTestId: 根据测试 ID 查找元素。fireEvent: 模拟用户事件，如点击、输入等。waitFor: 在异步操作完成后等待结果。
示例代码
以下是一个使用 React Testing Library 9 进行单元测试的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---------- -------- ---- ---------------------
------ --- ---- --------
------------- ----------- -- -- -
------------- ----------- -- -- -
----- ----------- - ---------------
-- -----------
----------------------- ------------------------------
---
------------ ----- ------- ------- ----- -- -- -
----- ----------- - ---------------
----- ------ - ---------------- -----
-- --------
------------------------
-- --------
----- ---------- -- ------------------------ ---------------------------------
---
---以上代码是一个简单的 App 组件，包含一个按钮，单击按钮会更新应用程序的状态。在第一个测试中，我们检查了应用程序是否渲染正确。在第二个测试中，我们模拟了按钮点击事件并等待状态更新完成后验证更新后的状态是否正确。
总结
React Testing Library 9 是一个非常有用的测试库，可以使我们更轻松地编写单元测试和 E2E 测试，确保代码的稳定性和正确性。在本文中，我们介绍了 React Testing Library 9 的安装、使用场景、API 及示例代码，希望能够帮助前端开发者更好地了解和使用 React Testing Library 9。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067382890c4f72775842dd