React项目运行Cypress测试提示Webpack无法解析Src/api别名报错如何解决

你遇到的模块解析报错，核心是Cypress运行组件测试时，默认不会主动读取项目根目录的webpack配置，你在业务构建中配置的Src路径别名没有被Cypress的构建逻辑识别，因此无法定位到对应的模块文件。

方法1：在Cypress配置中复用/新增webpack别名（推荐） #

Cypress 10及以上版本可直接在cypress.config.js中配置webpack规则，示例如下：

直接复用项目已有webpack配置 #

const { defineConfig } = require('cypress')
// 替换为你项目webpack配置文件的实际相对路径
const projectWebpackConfig = require('./webpack.config.js')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      // 直接传入项目的webpack配置，别名会自动生效
      webpackConfig: projectWebpackConfig
    }
  }
})

单独为Cypress配置别名 #

如果不想引入完整的项目webpack配置，也可以单独声明别名：

const path = require('path')
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: {
        resolve: {
          alias: {
            // 替换为你项目src目录的实际绝对路径
            Src: path.resolve(__dirname, './client/src')
          }
        }
      }
    }
  }
})

如果是Cypress 10以下的旧版本，需要在cypress/plugins/index.js中配置webpack预处理规则，注入别名配置即可。

方法2：补充jsconfig路径配置 #

你也可以在根目录的jsconfig.json中补充路径匹配范围，让Cypress识别别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "Src/*": ["client/src/*"]
    }
  },
  // 同时包含业务代码和Cypress测试代码
  "include": ["client/src/**/*", "cypress/**/*"]
}

• 配置修改后需要完全重启Cypress服务，新配置才会生效
• 注意路径大小写匹配，Mac/Linux系统对路径大小写敏感，Src和src会被识别为不同路径
• 确认别名指向的路径为绝对路径，避免相对路径引发的解析偏差

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