本教程介绍了使用 npm 包 jest-svg-transformer 来测试 SVG 图片的方法，包括其安装和配置，以及一个基于此的示例代码。
简介
jest-svg-transformer 是一个可以将 SVG 图片转换成可测试的格式的 npm 包。它可以将 SVG 格式的图片转换成一个可以被 Jest 测试用例调用的 JavaScript 模块。
使用 jest-svg-transformer 可以有效地简化测试 SVG 图片的过程，特别是在需要测试大量 SVG 图片的时候。
安装和配置
要使用 jest-svg-transformer，需要先安装它，可以通过以下命令进行安装：
npm install jest-svg-transformer --save-dev
安装完成后，需要在项目配置文件(jest.config.js)中进行配置，添加以下代码：
module.exports = {
transform: {
"\\.(svg)$": "jest-svg-transformer"
}
}上述代码中，transform 属性指定了 Jest 在处理文件时使用的转换器，我们将 Svg 文件转换器指定为 jest-svg-transformer。
现在，我们已经完成了 jest-svg-transformer 的安装和配置，接下来我们可以开始测试 SVG 图片了。
测试 SVG 图片
在顶层描述文件.it 中使用 .toMatchSnapshot() 截图文件描述挂起测试。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ - -------------- -- ---- - ---- ------------- -- ---- ---- ------- -------- ----- -- ---------------------- ----- ---- - --------------------- ------------- -- - ---- --- ------ --------------- -------------------------------
当你运行 Jest 时，Jest 将会：
- 使用 jest-svg-transformer 将 SVG 图片转换为 JavaScript 模块
- 创建一个 React 组件并使用
- 对渲染结果进行截图，并将截图和原始快照进行比较
- 如果渲染结果与快照不符合预期，Jest 将会抛出一个错误并提供详细的错误信息
示例代码
完整的示例代码请参考如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ - -------------- -- ---- - ---- -------------
-- ------
---------------- -- -- -
----------- ----------- -- -- -
-- ---- ---- ------- -------- -----
-- ----------------------
----- ---- - --------------------- -------------
-- - ---- --- ------ ---------------
-------------------------------
---
---上述代码中，我们使用 Jest 提供的测试工具 renderer 创建了一个渲染器，然后用渲染器渲染了一个 SVG 组件，并将渲染结果保存为快照。我们使用 Jest 提供的 expect 函数来验证渲染结果是否符合预期。
结语
jest-svg-transformer 是一个非常有用的 npm 包，它可以有效地简化测试 SVG 图片的过程。我们可以将其用于 Jest 测试框架中，以测试 SVG 图片的渲染和表现。希望本教程能够对你有所帮助，祝你学习愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79979