React-Vite项目Cypress组件测试偶发未捕获错误求助

问题现象 #

本地MacBook Pro运行React-Vite项目的10个左右Cypress组件测试时，偶发出现无规律的未捕获错误，错误日志如下：

An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Failed to fetch dynamically imported module: http://localhost:5173/__cypress/src/cypress/support/component.ts

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

错误随机出现在任意测试中，怀疑与项目中使用的绝对路径导入（如import {comp1, comp2} from 'components'，已在tsconfig.ts配置别名）相关。

解决方案 #

1. 让Cypress识别TS配置的路径别名

Cypress默认不会自动读取tsconfig.ts的路径别名，需在cypress.config.ts中手动配置：

import { defineConfig } from 'cypress';
import { resolve } from 'path';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
      viteConfig: {
        resolve: {
          alias: {
            'components': resolve(__dirname, './src/components'),
            // 其他路径别名也需同步配置
          },
        },
      },
    },
  },
});

若项目依赖多个别名，可使用vite-tsconfig-paths插件自动同步：

• 安装依赖：npm install vite-tsconfig-paths --save-dev
• 修改cypress.config.ts：

import { defineConfig } from 'cypress';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
      viteConfig: {
        plugins: [tsconfigPaths()],
      },
    },
  },
});

2. 检查支持文件的导入合法性

确认cypress/support/component.ts中的所有导入路径都能被Cypress正确解析：

• 避免在支持文件中使用未在Cypress配置中声明的绝对路径
• 若需导入项目组件，改用相对路径或确保别名已同步配置

3. 临时忽略偶发错误（排查阶段用）

若需先保证测试运行不中断，可在cypress/support/component.ts中添加错误拦截：

Cypress.on('uncaught:exception', (err) => {
  // 忽略动态导入失败的偶发错误
  if (err.message.includes('Failed to fetch dynamically imported module')) {
    return false;
  }
});

注：此为临时方案，需配合其他方法解决根源问题。

4. 优化Vite构建缓存

• 清理缓存：删除node_modules/.cache、cypress/cache目录，重启测试服务
• 在vite.config.ts中预构建别名模块：

export default defineConfig({
  optimizeDeps: {
    include: ['components'], // 预构建常用别名模块
  },
});

5. 调整测试运行策略

• 关闭测试并行运行：在cypress.config.ts中设置component.parallel: false，避免资源竞争导致的导入失败
• 增加测试前等待：在cypress/support/component.ts中添加钩子，确保Vite服务完全就绪：

beforeEach(() => {
  cy.wait(300); // 根据实际情况调整等待时间
});

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