Jest测试无法识别Vue项目中的@别名问题求助

问题根源 #

你的组件里用了@/stores/AuthStore这种路径导入，但当前jest.config.js的moduleNameMapper只配置了@root和@components的别名映射，没有匹配@/开头的路径规则，导致Jest无法识别@/指向的是src目录，所以报错找不到模块。

解决方案 #

在moduleNameMapper中添加针对@/的映射规则，修改后的完整配置如下：

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // 新增这条规则，匹配所有@/开头的路径
    '^@root(.*)$': '<rootDir>/src$1',
    '^@components(.*)$': '<rootDir>/src/components$1',
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': '@vue/vue3-jest',
  },
};

说明 #

Vue项目中默认的@别名指向项目根目录下的src文件夹，Jest本身不识别Vue的别名配置，必须在moduleNameMapper里明确声明对应的映射关系，这样Jest才能正确解析@/stores/AuthStore这类导入路径，找到对应的文件。

内容的提问来源于stack exchange，提问作者Дмитрий Андреевич