Cypress 12.3组件测试报错：plugin:vite:import-analysis导入解析失败

Cypress 12.x默认切换为Vite作为组件测试的构建工具，和之前10.x版本使用的Webpack在路径解析逻辑上存在差异，这是导致问题的核心原因。以下是针对性的解决步骤：

• 配置Vite路径别名
  Vite不会自动读取tsconfig.json中的paths配置，需要单独在vite.config.ts/vite.config.js中配置对应别名：

  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    resolve: {
      alias: {
        // 对应你tsconfig里的路径映射规则，根据实际项目结构调整
        'store': path.resolve(__dirname, './src/store'),
      },
    },
  });
  

• 让Cypress组件测试关联Vite配置
  在cypress.config.ts/cypress.config.js中，确保组件测试的devServer引用你的自定义Vite配置：

  import { defineConfig } from 'cypress';
  import viteConfig from './vite.config';
  
  export default defineConfig({
    component: {
      devServer: {
        framework: 'react', // 替换为你的实际框架（vue/angular等）
        bundler: 'vite',
        viteConfig, // 引入自定义Vite配置
      },
    },
  });
  

• 清除缓存
  缓存残留可能导致配置不生效，执行以下操作：

  • 运行命令：npx cypress cache clear
  • 删除项目根目录下的node_modules/.vite文件夹
  • 重启Cypress测试运行器

• 检查路径大小写一致性
  虽然Windows文件系统大小写不敏感，但Vite模块解析时可能严格区分。确认List.tsx中的导入路径store/hooks和实际文件路径（比如src/store/hooks.ts）的大小写完全匹配。

• 验证tsconfig配置有效性
  在IDE中按住Ctrl（或Cmd）点击store/hooks导入语句，如果能直接跳转到对应文件，说明tsconfig的paths配置正常，问题集中在Vite解析环节，重新检查Vite配置即可。

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