Angular13迁移Jest时出现Class Extends value undefined错误求助

可能的原因及对应解决方案 #

1. 排查模块导入与解析问题 #

• 优先用相对路径导入基组件，比如import { BaseComponent } from './base.component'，避免路径别名配置错误导致Jest找不到基组件。
• 若必须用别名，确保tsconfig.spec.json的compilerOptions.paths和jest.config.js的moduleNameMapper完全匹配，示例：

  // tsconfig.spec.json
  "paths": {
    "@app/*": ["src/app/*"]
  }
  

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

2. 修正Jest的transform配置 #

Angular组件需要jest-preset-angular处理编译，确保jest.config.js里的transform覆盖所有相关文件：

transform: {
  '^.+\\.(ts|js|html)$': 'jest-preset-angular',
},

同时不要让transformIgnorePatterns排除Angular核心模块：

transformIgnorePatterns: [
  'node_modules/(?!@angular|rxjs)',
],

3. 调整tsconfig.spec.json配置 #

• 显式把基组件加入include数组，避免Jest编译时遗漏：

  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts",
    "src/app/components/base.component.ts"
  ]
  

• 检查compilerOptions的target设为ES2020、module设为ESNext或CommonJS，确保和Jest兼容。

4. 规范测试文件的导入顺序 #

在子组件测试文件顶部先导入基组件，再导入子组件，避免Jest加载时子组件先于基组件初始化：

import { BaseComponent } from './base.component';
import { ChildComponent } from './child.component';

5. 检查循环依赖 #

用ng lint扫描项目，确认基组件和子组件之间没有循环导入——Jest对循环依赖的处理逻辑和Jasmine不同，这类问题很容易触发类未定义错误。

6. 清除Jest缓存后重试 #

Jest的缓存可能残留旧编译结果，执行命令清空缓存后重新运行测试：

npx jest --clearCache

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