Jest与Jest DOM扩展库

Jest 是一个流行的 JavaScript 测试框架，它可以轻松地为 JavaScript 代码编写单元测试和集成测试。Jest 提供了丰富的功能，如自动模拟、快照测试、代码覆盖率等，使得开发人员能够更轻松地编写和维护测试用例。

Jest DOM 是一个 Jest 的扩展库，它提供了一组针对 DOM 元素的自定义匹配器。这些匹配器可以帮助你更方便地编写针对 DOM 元素的测试用例，例如检查元素是否存在、是否包含特定的文本或属性等。

要使用 Jest DOM，首先需要安装它。你可以通过 npm 或 yarn 将其添加到项目中：

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

或者

yarn add --dev @testing-library/jest-dom

然后，在你的测试设置文件（例如 setupTests.js）中，引入并配置 Jest DOM：

import '@testing-library/jest-dom';

现在，你可以在测试用例中使用 Jest DOM 提供的自定义匹配器。例如，假设你有一个 React 组件，它包含一个带有类名 “button” 的按钮，你可以使用 toBeInTheDocument 匹配器来检查该按钮是否存在于 DOM 中：

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders a button with the class "button"', () => {
  render(<MyComponent />);
  const button = screen.getByRole('button');
  expect(button).toBeInTheDocument();
});

Jest DOM 提供了许多其他有用的匹配器，如 toHaveTextContent、toHaveAttribute 等，可以帮助你更轻松地编写针对 DOM 元素的测试用例。更多关于 Jest DOM 的信息和匹配器列表，请参考官方文档：https://github.com/testing-library/jest-dom