React TypeScript项目中Cypress组件测试别名导入报错求助

问题分析 #

项目已通过tsconfig.paths.json配置@company/*指向src/*，TypeScript语法层面的别名解析正常，但Cypress组件测试运行时无法识别该别名，核心原因是Cypress组件测试的Webpack打包配置未同步别名规则，同时现有预处理器配置存在两处缺陷：

1. 别名匹配规则仅定义了@company，未覆盖@company/*的路径格式
2. 缺少对.tsx文件的编译处理逻辑

修复步骤 #

1. 安装依赖（推荐方案） #

使用tsconfig-paths-webpack-plugin自动同步tsconfig.json中的paths配置，避免手动维护别名：

npm install --save-dev tsconfig-paths-webpack-plugin

2. 修改Webpack预处理器配置 #

更新cypress/plugins/cy-ts-preprocessor.js为以下内容：

const wp = require("@cypress/webpack-preprocessor");
const path = require("path");
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const webpackOptions = {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    // 自动读取根目录tsconfig的paths规则
    plugins: [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, "../../tsconfig.json")
      })
    ]
  },
  module: {
    rules: [
      {
        // 同时处理.ts和.tsx文件
        test: /\.(ts|tsx)$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader",
            options: {
              // 指定使用根目录的tsconfig
              configFile: path.resolve(__dirname, "../../tsconfig.json")
            }
          }
        ],
      },
    ],
  },
};

const options = {
  webpackOptions,
};

module.exports = wp(options);

3. 确认组件测试预处理器加载 #

检查cypress.config.js的component配置，确保setupNodeEvents已正确加载预处理器：

component: {
  devServer: {
    framework: "create-react-app",
    bundler: "webpack",
  },
  setupNodeEvents(on, config) {
    return require("./cypress/plugins/index.js")(on, config);
  },
},

4. 验证文件名大小写（关键） #

确保导入路径中的文件名与实际文件严格一致：你的导入语句是@company/components/Input，但实际文件为input.tsx，在区分大小写的系统（如Linux/macOS）中会导致解析失败，建议统一命名规范。

替代方案（无需额外依赖） #

如果不想安装插件，可手动在Webpack配置中声明别名：
修改cypress/plugins/cy-ts-preprocessor.js的resolve.alias字段：

resolve: {
  extensions: [".ts", ".tsx", ".js", ".jsx"],
  alias: {
    '@company': path.resolve(__dirname, "../../src"),
    '@company/*': path.resolve(__dirname, "../../src/*"),
  }
},

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