在 Jest 中使用 @testing-library/dom 对 DOM 操作进行测试-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，对于 DOM 操作的测试是非常重要的一部分，因为它涉及到页面的交互和用户体验。而 @testing-library/dom 是一个非常好用的工具库，可以帮助我们对 DOM 进行测试。本文将介绍如何在 Jest 中使用 @testing-library/dom 进行 DOM 操作测试。

安装和引入

首先，我们需要安装 @testing-library/dom：

npm install --save-dev @testing-library/dom

接着，在需要使用的文件中引入：

import { getByText } from '@testing-library/dom';

测试示例

下面我们来看一个示例，假设我们有一个按钮，点击后会弹出一个提示框。我们需要测试这个按钮是否能够正常弹出提示框。

HTML 代码：

<button id="btn">Click me</button>

JavaScript 代码：

import { getByText } from '@testing-library/dom';

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  alert('Hello, world!');
});

测试代码：

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

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

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

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

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

在测试代码中，我们首先创建一个虚拟的 DOM 节点，然后获取按钮节点，模拟点击事件，最后断言提示框是否弹出。

深入理解

@testing-library/dom 提供了一系列的查询函数，可以根据不同的条件获取 DOM 节点。比如 getByText、getByRole、getByLabelText 等等。这些函数的返回值是一个 DOM 节点对象，可以进一步操作。

除了查询函数，@testing-library/dom 还提供了一些操作函数，比如 fireEvent、wait 等等。fireEvent 可以模拟各种事件，比如点击、输入、选择等等。wait 可以等待某个条件满足后再进行下一步操作，比如等待某个节点出现或消失。

在使用 @testing-library/dom 进行测试时，我们应该尽量避免直接操作 DOM 节点，而是通过查询函数和操作函数来模拟用户行为，这样可以更好地测试页面的交互和用户体验。

总结

在 Jest 中使用 @testing-library/dom 对 DOM 操作进行测试是非常方便的。通过深入理解 @testing-library/dom 的查询函数和操作函数，我们可以更好地测试页面的交互和用户体验。同时，这也是一种良好的编程习惯，可以使我们的代码更加可维护和可测试。

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