Next.js项目Jest测试时模块导入失败问题求助

我是TypeScript新手，在为Next.js项目添加Jest测试时遇到模块导入问题：

• 测试文件位于src/model/xxx，导入src/@types/xxx时提示模块找不到
• 改用相对路径../@types/xxx可正常运行
• 尝试用moduleDirectories解决，但出现找不到node_modules的问题

当前配置 #

jest.config.js #

module.exports = {
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
  ],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
    '^@models/(.*)$': '<rootDir>/models/$1',
    '^@controllers/(.*)$': '<rootDir>/controllers/$1',
    '^@middleware/(.*)$': '<rootDir>/middleware/$1',
    '^@mycomponents/(.*)$': '<rootDir>/src/components/$1',
  },
  moduleDirectories: [
    'src',
    'node_modules'
  ]
}

jest.setup.ts #

import { configure } from "enzyme";
import ReactAdapter from "@wojtekmaj/enzyme-adapter-react-17";

configure({ adapter: new ReactAdapter() });

1. @types路径未配置别名：当前moduleNameMapper仅给@models、@controllers等设置了别名映射，未覆盖src/@types路径，导致Jest无法识别该导入路径。
2. moduleDirectories配置冲突：将src加入moduleDirectories后，Jest优先在src目录下查找模块，降低了node_modules的查找优先级，导致第三方包无法被找到。

直接给@types添加别名映射是最稳妥的方案，无需修改moduleDirectories，步骤如下：

1. 在jest.config.js的moduleNameMapper中新增@types的映射规则：

moduleNameMapper: {
  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
  '^@models/(.*)$': '<rootDir>/models/$1',
  '^@controllers/(.*)$': '<rootDir>/controllers/$1',
  '^@middleware/(.*)$': '<rootDir>/middleware/$1',
  '^@mycomponents/(.*)$': '<rootDir>/src/components/$1',
  '^@types/(.*)$': '<rootDir>/src/@types/$1', // 新增该行
},

2. 同步更新tsconfig.json的路径配置，保证开发环境与测试环境路径规则一致：
   在tsconfig.json的compilerOptions中添加：

"paths": {
  "@types/*": ["./src/@types/*"],
  "@models/*": ["./models/*"],
  "@controllers/*": ["./controllers/*"],
  "@middleware/*": ["./middleware/*"],
  "@mycomponents/*": ["./src/components/*"]
}

3. 若之前修改过moduleDirectories导致node_modules找不到，直接删除该配置或恢复默认值（默认值为['node_modules', '<rootDir>']）即可。

完成以上配置后，重启Jest测试，即可在src/model/xxx的测试文件中直接使用import xxx from '@types/xxx'导入模块。

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