从CRA迁移到Vite后，如何让Vitest识别绝对导入？

核心问题分析 #

你的Vite应用能正常构建运行，但Vitest测试时出现部分导入undefined，本质是Vitest未正确读取你的绝对路径配置，或者路径解析逻辑与Vite主应用存在差异。以下是针对性的解决步骤：

1. 确保Vitest配置中启用vite-tsconfig-paths插件 #

Vite的插件不会自动继承到Vitest，需要在vitest.config.ts中单独配置：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()], // 必须添加tsconfigPaths插件
  test: {
    environment: 'jsdom', // React测试需要jsdom环境
    globals: true, // 可选，省略import { test, expect }的步骤
    include: ['src/**/*.test.{ts,tsx}'], // 确保覆盖所有测试文件
  },
});

2. 修正tsconfig.json的冲突配置 #

你的tsconfig.json中rootDirs: ["./bin"]可能干扰路径解析，若bin目录不是必要的根目录配置，建议移除：

{
  "compilerOptions": {
    // ... 保留其他配置
    "rootDirs": [] // 移除或调整为["src"]
  },
  "include": ["src", "src/**/*.test.{ts,tsx}"] // 确保测试文件被TypeScript识别
}

如果测试文件在src外（比如tests目录），需要把tests加入include数组。

3. 手动添加Vitest路径别名兜底 #

如果上述步骤无效，直接在Vitest配置中手动映射路径，绕过插件可能的问题：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    include: ['src/**/*.test.{ts,tsx}'],
    resolve: {
      alias: {
        'components': path.resolve(__dirname, './src/components'),
        'utilities': path.resolve(__dirname, './src/utilities'),
        'components/staticData/data': path.resolve(__dirname, './src/components/staticData/data'),
      },
    },
  },
});

4. 验证模块导出正确性 #

虽然应用正常运行，但测试时可能因树摇或模块导出方式导致问题：

• 确认components/filter中的ArelFilterInputTypes是命名导出：

  // components/filter/index.ts
  export const ArelFilterInputTypes = { /* ... */ };
  export interface IArelFilterColumnConfig { /* ... */ }
  

  避免混用默认导出和命名导出导致的解析异常。

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