简介
jest-prettyhtml-matchers 是一款 npm 包，它提供了一组在 Jest 中测试 HTML 的自定义匹配器。使用这些自定义匹配器可以使 Jest 测试 HTML 代码变得更加简单易读，同时也提高了测试代码的可读性和可维护性。
安装
要在自己的项目中使用 jest-prettyhtml-matchers，需要先安装它。可以在项目的根目录下通过以下命令进行安装：
--- ------- ------------------------ ----------
安装完成之后，还需要在自己的项目的 jest.config.js 中配置，使 Jest 能够正确地使用自定义匹配器。
-------------- - - --- ------------------- -------------------------------------------- --- -
使用
在配置完成之后，就可以使用 jest-prettyhtml-matchers 中提供的自定义匹配器了。
toHTMLMatchSnapshot()
toHTMLMatchSnapshot 自定义匹配器类似于 Jest 中的 toMatchSnapshot，它允许你将组件的 HTML 快照与预期快照进行比较。但与 toMatchSnapshot 不同的是，toHTMLMatchSnapshot 使用了 prettyhtml 库来格式化 HTML 代码，让测试快照的输出更具可读性。
以下是 toHTMLMatchSnapshot 的示例代码：
------ - ------ - ---- ------------------------- ------ ------------------------------------------ ------------- - --- ---- - ----- ------ -- -- - ----- - --------- - - ----------- ---------------------- ---- --------------------------------------------------- ---
在上述示例中，首先使用 render 方法渲染一个包含 "test-class" 类名的 div 元素，并将它的结果存储在 container 中。接着使用 expect() 和 toHTMLMatchSnapshot() 自定义匹配器断言结果与快照匹配。
toHaveHTMLClass()
toHaveHTMLClass 自定义匹配器用于确认 HTML 元素是否包含指定的类名。此匹配器的使用方法相对简单。
以下是 toHaveHTMLClass 的示例代码：
------ - ------ - ---- ------------------------- ------ ------------------------------------------ ------------- - --- ---- - ----- ------ -- -- - ----- - --------- - - ----------- ---------------------- ---- ----------------------------------------------------------- ---
在上述示例中，首先使用 render 方法渲染一个包含 "test-class" 类名的 div 元素，并将它的结果存储在 container 中。接着使用 expect() 和 toHaveHTMLClass('test-class') 自定义匹配器断言结果包含该类名。
总结
jest-prettyhtml-matchers 是一款非常有用的 Jest 自定义匹配器，它可以帮助我们更加简单易读地测试 HTML 代码。通过上面的介绍，相信大家已经了解了如何安装和使用 jest-prettyhtml-matchers。希望本文能够给大家带来帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f10196a403f2923b035c222