在前端开发中，我们通常需要加载一些图像资源。但是，在进行单元测试时，有时会出现图像 404 警告，导致测试失败。本文将介绍如何解决这个问题。
问题描述
在使用 Jest 进行单元测试时，如果页面中存在未正确引用的图像资源，就会出现 404 警告。例如：
console.warn node_modules/jsdom/lib/jsdom/virtual-console.js:29
Image failed to load: http://localhost/example.png如果遇到这种情况，则表明测试代码无法正常加载图像资源，从而导致测试失败。
解决方法
解决方法非常简单：我们只需要在运行测试前提前加载图像资源即可。这可以通过以下两种方式实现：
方法一：使用 file-loader
file-loader 是一个 webpack 插件，用于将文件复制到输出目录并返回文件 URL。我们可以使用它来加载图像资源，并将其作为模块导入到测试中。以下是具体步骤：
安装 file-loader：
npm install file-loader --save-dev
在 webpack 配置文件中添加以下内容：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- ---------------------- ---- - - ------- -------------- -- -- -- -- -- --此配置将所有 png、jpg 和 gif 文件视为模块，并使用 file-loader 进行处理。
在测试文件中导入图像资源并执行测试代码：
-- -------------------- ---- ------- ------ ------- ---- ---------------- ---------------- -- -- - ------------ -- - --- ----------- - -------- --- ---------- ------ -- -- - -- --- --- ---在 beforeAll 阶段，我们创建了一个新的 Image 对象，并将其 src 属性设置为刚刚导入的图像资源。这样，即使在测试执行期间加载该图像，也不会出现 404 警告。
方法二：使用 jest-image-snapshot
jest-image-snapshot 是 Jest 的一个插件，用于进行图像比较和快照测试。我们可以利用它来加载测试所需的图像资源，并将其作为测试快照进行保存。以下是具体步骤：
安装 jest-image-snapshot：
npm install jest-image-snapshot --save-dev
在 Jest 配置文件中添加以下内容：
module.exports = { // ... snapshotSerializers: ['jest-image-snapshot/serializer'], transform: { '^.+\\.(bmp|gif|jpg|jpeg|png|svg|webp)$': 'jest-transform-file', }, setupFilesAfterEnv: ['jest-extended', 'jest-image-snapshot'], };此配置将 jest-image-snapshot 添加到 snapshotSerializers 和 setupFilesAfterEnv 中，并使用 jest-transform-file 来处理图像文件。
在测试文件中加载图像资源并执行测试代码：
-- -------------------- ---- ------- ------ ------- ---- ---------------- ---------------- -- -- - ---------- ------ -- -- - ----- ----- - --- -------- --------- - -------- ------------------------------------ ----------------- ----- --------------------- ---------- --- --- ---在测试中，我们创建了一个新的 Image 对象，并将其 src 属性设置为刚刚导入的图像资源。然后，我们使用 expect() 函数将该对象与保存的测试快照进行比较。如果两个图像不匹配，则测试失败。否则，测试通过。
结论
在本文中，我们介绍了如何在 Jest 单元测试期间修复图像的 404 警告。通过使用 file-loader 或 jest-image-snapshot，我们可以
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13336