Next.js+TypeScript项目中Jest无法识别路径别名的解决求助

要让Jest识别你在tsconfig.json中配置的@/*路径别名，需要在Jest配置中手动添加路径映射规则，具体步骤如下：

修改Jest配置文件 #

在jest.config.js的customJestConfig对象中添加moduleNameMapper配置，将@/*映射到项目的src目录：

// jest.config.js
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

/** @type {import('jest').Config} */
const customJestConfig = {
  testEnvironment: 'jest-environment-jsdom',
  // 添加路径别名映射
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

module.exports = createJestConfig(customJestConfig);

配置说明 #

• ^@/(.*)$是正则表达式，匹配所有以@/开头的模块导入路径
• <rootDir>/src/$1将匹配到的路径替换为项目根目录下src文件夹对应的子路径（$1对应正则中捕获的部分）

完成配置后重新运行测试，Jest就能正确识别@/*路径别名，不会再出现模块找不到的错误。

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