如何在Next.js代码库中配置Vitest适配图片资源解析逻辑？

要让Vitest像Next.js那样处理图片等资源文件（返回带src属性的对象），替代Jest的transform配置，你可以按以下步骤操作：

1. 创建资源模拟转换器 #

在项目根目录新建file-mock.js，用来处理资源文件的转换，返回和Next.js一致的结构：

// file-mock.js
module.exports = {
  process(_, filename) {
    // 返回包含src属性的对象，模拟Next.js对图片的解析结果
    return `module.exports = { src: '${filename}' };`;
  },
};

如果需要更贴近真实场景，也可以根据文件名生成模拟的优化路径：

return `module.exports = { src: '/_next/image?url=${encodeURIComponent(filename)}&w=800&q=75' };`;

2. 配置Vitest的转换规则 #

修改vitest.config.js，指定资源文件的转换逻辑：

// vitest.config.js
import { defineConfig } from 'vitest/config';
import next from '@next/vite-plugin-next';

export default defineConfig({
  plugins: [next()],
  test: {
    environment: 'jsdom', // 页面测试需使用jsdom环境
    transform: {
      // 匹配所有需要处理的资源类型
      '\\.(jpg|jpeg|png|gif|svg|webp)$': './file-mock.js',
      '\\.(eot|otf|ttf|woff|woff2)$': './file-mock.js',
      '\\.(mp4|webm|wav|mp3|m4a|aac|oga)$': './file-mock.js',
    },
  },
});

原理说明 #

Vitest默认会尝试将图片等二进制文件当作JS模块解析，这会直接触发SyntaxError错误。通过配置transform，我们让Vitest用自定义的转换器处理这些文件，返回符合Next.js解析结果格式的JS对象，这样动态require图片时就不会报错了。

内容的提问来源于stack exchange，提问作者Daniel Macak