Angular 4集成Jest单元测试报错：split属性未定义求助

问题描述 #

开发Angular 4项目时，尝试集成Jest 29.3.1做单元测试，执行ng run test命令出现以下错误：

ERROR : while running : ng run test
TypeError: Cannot read property 'split' of undefined at isAfterVersion
\node_modules\jest-preset-angular\build\ngtsc\ts_compatibility\src\ts_cross_version_utils.js:87:67) at Object.
\node_modules\jest-preset-angular\build\ngtsc\ts_compatibility\src\ts_cross_version_utils.js:13:24)
at Module.compile (internal/modules/cjs/loader.js:1085:14)

更换更低版本Jest后，错误依旧。当前项目package.json依赖配置如下：

"dependencies": {
    "@angular/aninations": "^4.4.6",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/cli": "1.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compile": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.8",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic":"4.8.8",
    "@angular/router": "^4.0.8",
    "bootstrap": "3.5.7",
    "core-js": "2.4.1",
    "enhanced-resolve": "^3.3.0",
    "Jest": "29.3.1",
    "jest-preset-anguler": "12.2.3"
}

错误原因 #

1. 版本严重不兼容：Jest 29.x和jest-preset-angular 12.x是为Angular 12及以上版本设计的，完全不支持Angular 4这类旧版本。
2. 依赖拼写错误：package.json里存在多处拼写错误，比如@angular/aninations应为@angular/animations，@angular/compile应为@angular/compiler，jest-preset-anguler应为jest-preset-angular，这类错误会导致依赖加载异常。

解决方案 #

1. 修正依赖拼写错误 #

先把package.json里的拼写错误全部修正，确保依赖名称准确无误。

2. 更换适配Angular 4的Jest及配套版本 #

针对Angular 4，需使用Jest 23.x版本和jest-preset-angular 7.x版本，这是适配Angular 4的稳定组合。修改后的相关依赖（建议移至devDependencies下，因为单元测试工具属于开发依赖）：

"devDependencies": {
    "jest": "^23.6.0",
    "jest-preset-angular": "^7.1.1",
    "@types/jest": "^23.3.10"
}

3. 重新安装依赖 #

删除node_modules文件夹和package-lock.json（或yarn.lock），然后执行：

npm install
# 或使用yarn
yarn install

4. 配置Jest #

在项目根目录创建jest.config.js文件，内容如下：

module.exports = {
  preset: 'jest-preset-angular',
  setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
  roots: ['src'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html']
};

同时在src目录下创建setupJest.ts文件：

import 'jest-preset-angular';

5. 更新测试命令 #

在package.json的scripts里添加或修改测试命令：

"scripts": {
  "test": "jest"
}

之后执行npm test即可运行单元测试。

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