前言
前端的开发中，测试是非常重要的一环。在进行前端页面的测试时，我们经常需要对页面的 DOM 结构进行断言。而 @testing-library/dom 是一个很好的工具库，它专门用于对前端页面的 DOM 进行测试。
安装
开发人员可以使用 NPM 或者 Yarn 来安装 @testing-library/dom。
npm install --save-dev @testing-library/dom
或者
yarn add --dev @testing-library/dom
介绍
@testing-library/dom 库提供了几个方法来测试 DOM。主要的方法有：
getByText()：返回页面上包含指定文本内容的元素；getByPlaceholderText()：返回页面上包含指定占位符文本的输入框元素；getByAltText()：返回页面上包含指定 alt 属性文本的图片元素；getByRole()：返回页面上 role 属性等于指定值的元素。
此外，还有许多其他方法，开发人员可以根据类型和需要查看 API 文档。
@testing-library/dom 库也提供了一些方便使用的方法，如 fireEvent 和 waitFor，用于模拟交互和等待页面加载。
代码示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
-------------------
-------
------
-------------
---------------
------
------ ---------------------------
------ ----------- ------------- --------------- -------------------- --
--- --
------ --------------------------
------ --------------- ------------- --------------- ------------------- --
--- --
------- -------------------------
-------
-------
--------- -------------------- ---- -------
------ - ---------- --------------------- ---------- ------- - ---- -----------------------
---------------- -- -- -
------------- -- -
----------------------- - -
-------------
---------------
------
------ ---------------------------
------ ----------- ------------- --------------- -------------------- --
--- --
------ --------------------------
------ --------------- ------------- --------------- ------------------- --
--- --
------- -------------------------
-------
--
---
-------------- -- -- -
----- ------- - ------------------------ ------------
-----------------------------
---
------------- -- -- -
----- ------- - ----------------------------------- ----------
-----------------------------
---
-------------- ----- -- -- -
----- -------- - -------
----- -------- - ---------
----- ------ - ------------------------ ------
----- ------------- - ----------------------------------- ----------
----- ------------- - ----------------------------------- ---------
------------------------------- - ------- - ------ -------- - ---
------------------------------- - ------- - ------ -------- - ---
------------------------
----- ---------- -- -
--------------------------------------------------
---
---
---在前面的代码示例中，我们首先定义了一个基本的 HTML 页面，其中包含一些基本的 DOM 元素。然后，我们使用测试代码来测试页面上各个 DOM 元素的存在以及视觉效果。
在测试中，我们使用了 getByText() 方法来查找页面上包含文本的元素。同样，也可以使用 getByPlaceholderText() 查找带占位符的输入框元素。
在测试表单提交的事件中，我们使用了 fireEvent() 来模拟用户的交互。然后，测试代码使用 waitFor() 方法来自动等待登录成功的提示信息。
总结
@testing-library/dom 是一款功能强大的前端 DOM 测试工具。通过使用它，您可以轻松地测试前端页面的 DOM 元素。本文介绍了最常用的方法，并提供了示例代码，以帮助您更有效地使用 @testing-library/dom 来测试您的前端页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/testing-library-dom