如何在Cypress测试中配置根目录相对导入的@别名？

当然可以给Cypress配置@别名，以下分版本说明具体配置方式：

Cypress 10+ 版本（使用cypress.config.js/ts） #

在项目根目录的cypress.config.js中，直接添加resolve.alias配置，和Vite的写法类似：

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

module.exports = defineConfig({
  // 保留你原有e2e、component等配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

如果你的项目使用TypeScript，还需要在tsconfig.json的compilerOptions中添加路径映射，让编辑器正确识别别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    // 其他原有配置
  },
  "include": ["src/**/*", "cypress/**/*"]
}

Cypress 9及以下版本（使用cypress.json + plugins/index.js） #

这类版本需要通过Webpack预处理器配置别名，在cypress/plugins/index.js中修改：

const path = require('path')
const webpackPreprocessor = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  const webpackOptions = {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, '../../src') // 路径需相对plugins目录调整
      }
    }
  }
  on('file:preprocessor', webpackPreprocessor({ webpackOptions }))
  return config
}

同样，TypeScript项目要同步更新tsconfig.json的paths配置，和上面一致。

配置完成后，你就能在Cypress文件中直接使用import { randomId } from '@/utils/string-utils'这样的简洁导入，无需再写冗长的相对路径。

内容的提问来源于stack exchange，提问作者Dónal