不使用TypeScript如何配置Jest moduleNameMapper解决别名报错

问题复现 #

• 初始Jest配置（纯JS Vue3项目）：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\.vue$': '@vue/vue3-jest',
    '^.+\js$': 'babel-jest'
  },
  testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(js)$',
  moduleFileExtensions: ['vue', 'js'],
  transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)']
}

• 测试用例代码：

import { mount } from '@vue/test-utils'
import HomePage from '@/views/HomePage.vue'

describe('HomePage.vue', () => {
  it('renders home vue', () => {
    const wrapper = mount(HomePage)
    expect(wrapper.text()).toMatch('Ready to create an app?')
  })
})

• 初始报错：未配置路径别名时无法识别@开头的导入路径，抛出模块找不到错误

● Test suite failed to run

    Cannot find module '@/views/HomePage.vue' from 'tests/unit/example.spec.js'

      1 | import { mount } from '@vue/test-utils'
    > 2 | import HomePage from '@/views/HomePage.vue'
        | ^
      3 |
      4 | describe('HomePage.vue', () => {
      5 |   it('renders home vue', () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (tests/unit/example.spec.js:2:1)

• 新增如下moduleNameMapper配置别名映射后，出现新报错：

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },

● Test suite failed to run

    Cannot find module 'ts-jest/dist/config/config-set'

• 核心诉求：不安装ts-jest、typescript依赖，解决上述问题

问题根因 #

• 初始配置中transform字段匹配js文件的正则存在转义错误：'^.+\js$'未正确转义.符号，会导致js文件转换逻辑异常
• @vue/vue3-jest默认会自动探测项目TypeScript环境，未显式关闭TS支持时，会尝试加载ts-jest相关依赖，纯JS项目未安装该依赖就会抛出模块找不到错误
• 新增的moduleNameMapper路径别名配置本身写法正确，不是报错来源

修复后完整配置 #

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\.vue$': ['@vue/vue3-jest', {
      // 显式关闭TS支持，跳过ts-jest依赖加载
      tsconfig: false
    }],
    // 修正js文件匹配正则的转义错误
    '^.+\.js$': 'babel-jest'
  },
  testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(js)$',
  moduleFileExtensions: ['vue', 'js'],
  // 路径别名配置保持不变
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)']
}

配置说明 #

• 修正js文件匹配正则为'^.+\.js$'，保证js文件正常走babel-jest转换
• 给@vue/vue3-jest传入tsconfig: false配置项，显式声明项目不使用TypeScript，跳过ts-jest依赖加载逻辑，无需安装TS相关依赖即可正常运行
• 保留正确的moduleNameMapper配置，实现@路径到src目录的映射

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