在前端的开发过程中，测试是必不可少的一部分，它可以帮助我们检查代码的正确性，避免在生产环境中出现问题。在测试的过程中，测试框架和库起着非常重要的作用，它们可以帮助我们轻松地编写和运行测试。jest-dom 就是其中一个优秀的库，本文将介绍它的使用和优势。
jest-dom 是什么？
jest-dom 是一个 Jest 的扩展库，它提供了许多用于对 DOM 元素进行测试的功能和断言。它的 API 与 Jest 的 expect API 非常相似，但是它提供了更多的功能，用于测试 DOM 元素。使用 jest-dom 可以使你的测试代码更加简洁和易于阅读。
jest-dom 的优势
提供了更多的 DOM 元素测试功能
使用 jest-dom，您可以测试更多的 DOM 元素属性和状态，例如元素的类名、id、文本内容、是否可见等等。以下是一些可用的 API：
- toBeInTheDocument：断言元素是否在文档中。
- toHaveClass：断言元素是否有特定的类名。
- toHaveAttribute：断言元素是否具有特定的属性。
- toContainHTML：断言元素是否包含特定的 HTML。
- toBeVisible：断言元素是否可见。
这些功能都可以简化你的测试代码，让你更专注于测试本身。
支持链式调用
使用 jest-dom，可以对同一元素执行多个测试，并且可以将测试链接在一起。例如：
expect(element).toBeInTheDocument().toHaveClass('button');这个断言将同时检查元素是否在文档中，并且它是否具有名为 'button' 的类名。
提高了测试的可读性
使用 jest-dom，你的测试代码将变得更加易于阅读和理解。例如，考虑以下两个例子：
-- -------------------- ---- ------- -- ---- -------- ----- ------- - -------------------- ----------------------------------------------------- ---------------------------------------------------------- -- -- -------- ----- ------- - -------------------- ------------------------------- --------------------------------------
第一个例子需要手动提取元素的属性，以进行比较。第二个例子则使用了 jest-dom 提供的特殊断言，使代码更简洁和易于理解。这可以使你在写和维护测试代码时更加高效。
jest-dom 的使用示例
安装 jest-dom
要开始使用 jest-dom，您需要在项目中安装它。
npm install --save-dev @testing-library/jest-dom
使用 jest-dom
在测试用例中使用 jest-dom 非常简单。仅需要在文件中引入库，并在测试用例中使用它的 API。
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
test('displays the correct title', () => {
render(<MyComponent />);
expect(screen.getByTestId('title')).toHaveTextContent('Hello, world!');
});此处使用 jest-dom 的 toBeVisible 和 toHaveTextContent API 断言元素是否可见，并且它是否包含特定的文本内容。
结论
在测试前端代码时，使用 jest-dom 可以帮助您编写更简洁、易于阅读和可靠的测试代码。它提供了许多用于测试 DOM 元素的功能和断言，可以大大简化测试代码，并提高测试的可读性。因此，建议您尝试使用该库优化和提高您的测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704cde4d91dce0dc8504754