npm 包 jest-prettyhtml-matchers 使用教程

简介

jest-prettyhtml-matchers 是一款 npm 包，它提供了一组在 Jest 中测试 HTML 的自定义匹配器。使用这些自定义匹配器可以使 Jest 测试 HTML 代码变得更加简单易读，同时也提高了测试代码的可读性和可维护性。

安装

要在自己的项目中使用 jest-prettyhtml-matchers，需要先安装它。可以在项目的根目录下通过以下命令进行安装：

npm install jest-prettyhtml-matchers --save-dev

安装完成之后，还需要在自己的项目的 jest.config.js 中配置，使 Jest 能够正确地使用自定义匹配器。

module.exports = {
  ...
  setupFilesAfterEnv: ['./node_modules/jest-prettyhtml-matchers'],
  ...
}

使用

在配置完成之后，就可以使用 jest-prettyhtml-matchers 中提供的自定义匹配器了。

toHTMLMatchSnapshot()

toHTMLMatchSnapshot 自定义匹配器类似于 Jest 中的 toMatchSnapshot，它允许你将组件的 HTML 快照与预期快照进行比较。但与 toMatchSnapshot 不同的是，toHTMLMatchSnapshot 使用了 prettyhtml 库来格式化 HTML 代码，让测试快照的输出更具可读性。

以下是 toHTMLMatchSnapshot 的示例代码：

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

test('renders a div with a class name', () => {
  const { container } = render(<div className="test-class" />);
  expect(container.firstChild).toHTMLMatchSnapshot();
});

在上述示例中，首先使用 render 方法渲染一个包含 "test-class" 类名的 div 元素，并将它的结果存储在 container 中。接着使用 expect() 和 toHTMLMatchSnapshot() 自定义匹配器断言结果与快照匹配。

toHaveHTMLClass()

toHaveHTMLClass 自定义匹配器用于确认 HTML 元素是否包含指定的类名。此匹配器的使用方法相对简单。

以下是 toHaveHTMLClass 的示例代码：

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

test('renders a div with a class name', () => {
  const { container } = render(<div className="test-class" />);
  expect(container.firstChild).toHaveHTMLClass('test-class');
});

在上述示例中，首先使用 render 方法渲染一个包含 "test-class" 类名的 div 元素，并将它的结果存储在 container 中。接着使用 expect() 和 toHaveHTMLClass('test-class') 自定义匹配器断言结果包含该类名。

总结

jest-prettyhtml-matchers 是一款非常有用的 Jest 自定义匹配器，它可以帮助我们更加简单易读地测试 HTML 代码。通过上面的介绍，相信大家已经了解了如何安装和使用 jest-prettyhtml-matchers。希望本文能够给大家带来帮助。

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