从Jest迁移到Vitest：如何为.js文件配置别名扩展名？

核心配置方案 #

在Vitest配置文件（vite.config.ts或vitest.config.ts）中，通过调整解析规则，让Vitest能将带.js扩展名的导入映射到src目录下的.ts/.tsx源文件：

步骤1：调整扩展名解析优先级 #

添加resolve.extensions配置，将.ts、.tsx放在.js之前，让Vitest优先尝试匹配源文件扩展名：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // 你的其他测试配置
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
});

步骤2：添加扩展名映射别名（可选增强） #

如果上述配置无法满足需求，可通过别名直接替换扩展名，确保精准映射：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // 你的其他测试配置
  },
  resolve: {
    alias: {
      '^(.+?)\\.js$': '$1.ts',
      '^(.+?)\\.jsx$': '$1.tsx'
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
});

原理说明 #

• NodeNext模块解析规则要求导入必须带扩展名，编译后.ts文件会生成.js文件，因此源码中需用.js扩展名导入
• Vitest直接执行src目录下的未编译文件，需要将导入语句中的.js扩展名对应到实际的.ts/.tsx源文件
• 调整解析优先级或设置别名，能让Vitest正确识别并加载对应源文件，无需修改源码中的导入格式

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams