如何配置Jest以正确识别处理Vite的?raw导入语法

算力阿峰

2026-10-6

解决方法

第一步：安装依赖

执行对应包管理命令安装jest-raw-loader：

# npm
npm install jest-raw-loader --save-dev
# yarn
yarn add jest-raw-loader --dev
# pnpm
pnpm add jest-raw-loader --save-dev

第二步：修改Jest配置

在项目的Jest配置文件（常用的为jest.config.js、jest.config.ts，或package.json内的jest字段）中新增如下规则，原有配置不需要删除：

module.exports = {
  // 此处保留你原本的所有Jest配置，比如测试文件匹配规则、babel/ts-jest转换规则等
  transform: {
    // 示例：原有ts/js转换规则保留，不要删
    "^.+\\.[tj]sx?$": "ts-jest",
    // 新增规则：所有带?raw后缀的导入统一走jest-raw-loader处理
    "^.+\\?raw$": "jest-raw-loader"
  },
  // 用于匹配导入路径中的?raw查询参数，剥离后缀后读取真实文件路径
  moduleNameMapper: {
    "^(.*)\\?raw$": "$1"
  }
}