简介
jest-dom 是一个 Jest 测试框架的扩展包，它提供了一系列的自定义匹配器（Matchers）和测试工具函数，用于更方便地编写 DOM 相关的测试用例。
本文将介绍如何在前端项目中使用 jest-dom 包来优化 Jest 测试用例的编写。
安装
可以通过 npm 或 yarn 安装 jest-dom：
npm install -D @testing-library/jest-dom # 或者 yarn add -D @testing-library/jest-dom
使用
引入
在你的测试文件中引入 jest-dom：
import '@testing-library/jest-dom';
Matchers
jest-dom 中提供了很多自定义匹配器，用于更精确地判断元素是否符合预期。下面介绍几个常用的 Matchers：
toBeInTheDocument
判断元素是否存在于文档中：
expect(document.body).toBeInTheDocument();
expect(screen.getByText('Hello, world!')).toBeInTheDocument();
expect(screen.queryByText('Goodbye, world!')).not.toBeInTheDocument();toHaveAttribute
判断元素是否拥有指定的属性：
expect(screen.getByLabelText('Email')).toHaveAttribute('type', 'email');
expect(screen.getByRole('button')).toHaveAttribute('disabled');toHaveStyle
判断元素是否拥有指定的样式：
expect(screen.getByRole('button')).toHaveStyle('background-color: blue;');
expect(screen.getByRole('button')).toHaveStyle({ backgroundColor: 'blue' });toHaveTextContent
判断元素是否包含指定的文本内容：
expect(screen.getByTestId('heading')).toHaveTextContent('Welcome');
expect(screen.getByTestId('message')).not.toHaveTextContent('Goodbye');工具函数
jest-dom 还提供了一些工具函数，用于在测试中更方便的操作 DOM 元素。
fireEvent
模拟用户在元素上触发事件：
import { fireEvent } from '@testing-library/dom';
fireEvent.click(screen.getByRole('button'));
fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'test@example.com' } });waitFor
等待元素出现、消失或达到某种状态：
-- -------------------- ---- ------- ------ - ------- - ---- ----------------------- ----- ---------- -- ---------------------------------------------------------------- ----- ---------- -- - ------------------------------------------------------------------------ ---------------------------------------------------------- --- ----- ---------- -- ---------------------------------------------------------------- --------
示例代码
以下是一个使用 jest-dom 的测试文件示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- -------------------------
------ ----------------------------
------ --------- ---- ------------------------------
------ --------- ---- --------------
--------------------- -- -- -
---------- ------ ----------- -- -- -
----------------- ----
-----------------------------------------------------------------
-----------------------------------------------------------------------
---
---------- ------ --- ------- -- ------ ------- -- -- -
----------------- ----
----- ------ - ---------------------------
------------------------
-------------------------------------------------------------------
------------------------
-----------------------------------------------------------------------
---
---总结
jest-dom 是一个非常实用的 Jest 扩展包，在编写前端项目中的测试用例时能够大大提升开发效率和测试覆盖率。通过本文的学习，你应该已经掌握了 jest-dom 的基本使用方法，并能够灵活运用其提供的自定义匹配器和工具函数来编写更加精确和可靠的测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41675