Angular 12项目配置Jest单元测试运行时找不到测试用例如何解决

经排查，我的Angular项目Jest配置异常是导致该问题的原因，若你遇到同类问题可优先排查Jest配置，也欢迎大家分享靠谱的Jest配置指南链接，非常感谢。

我需要为Angular 12项目配置Jest单元测试框架，参考多份教程后仍遇到问题：命令行执行jest可正常启动测试流程，但始终提示未找到测试用例，命令行报错截图如下：

现有配置内容 #

package.json 配置 #

我将Jest的部分配置写入package.json文件，内容如下：

{
  "name": "ramp-weather",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "ngcc",
    "ng": "ng",
    "start": "webpack serve ",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest --runInBand --coverage color"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "material-design-icons": "^3.0.1",
    "rxjs": "6.6.0",
    "ts-jest": "^27.0.7",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.8",
    "@angular/cli": "~12.2.8",
    "@angular/compiler-cli": "~12.2.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "@types/jest": "^27.0.2",
    "@types/node": "^12.11.1",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^6.5.1",
    "exports-loader": "^3.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "image-webpack-loader": "^8.0.1",
    "jest": "^27.3.1",
    "jest-preset-angular": "^10.1.0",
    "null-loader": "^4.0.1",
    "raw-loader": "^4.0.2",
    "source-map-loader": "^1.0.0",
    "style-loader": "^3.3.1",
    "to-string-loader": "^1.2.0",
    "ts-loader": "^9.2.6",
    "ts-node": "^10.4.0",
    "typescript": "4.2.3",
    "webpack": "^5.63.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
  },
  "jest": {
    "preset": "ts-jest",
    "setupFilesAfterEnv": [
        "<rootDir>/src/setup-jest.ts"
    ],
    "testPathIgnorePatterns": [
        "<rootDir>/node_modules/",
        "<rootDir>/dist/"
    ],
    "moduleDirectories": [ "node_modules", "src" ],
    "globals": {
        "ts-jest": {
            "tsConfig": "<rootDir>/tsconfig.spec.json",
            "stringifyContentPathRegex": "\\.html$"
        }
    }
  }
}

setup-jest.ts 配置 #

我的setup-jest配置文件仅包含如下导入语句：

//setup-jest file
import 'jest-preset-angular/setup-jest';

tsconfig.json 配置 #

我的tsconfig.json配置内容如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "rootDir": ".",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "allowSyntheticDefaultImports": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "include": ["src/**/*"]
}

我尝试调整了tsconfig.json中的baseUrl、rootDir等多项配置，均无法让Jest识别到测试用例，希望能得到可行的解决方案。

解决方案 #

可按照以下步骤调整配置解决该问题：

• 替换Jest预设：Angular项目需使用jest-preset-angular而非ts-jest预设，将package.json中jest配置的preset字段值修改为jest-preset-angular
• 补充测试文件匹配规则：添加testMatch字段明确匹配.spec.ts后缀的测试用例文件：

  "testMatch": [
    "**/+(*.)+(spec).+(ts)"
  ]
  

• 补充模块扩展名识别配置：添加moduleFileExtensions字段，明确识别Angular常用文件后缀：

  "moduleFileExtensions": ["ts", "html", "js", "json"]
  

• 确认tsconfig.spec.json存在：你当前配置指定了tsConfig为<rootDir>/tsconfig.spec.json，需确保根目录存在该文件，若不存在可复制tsconfig.json后在compilerOptions中补充Jest相关类型配置：

  "types": ["jest", "node"]
  

• 修正test命令参数：将scripts中test命令的--coverage color修改为--coverage --color，修正参数格式错误
• 添加转换规则：配置transform字段指定Angular文件转换规则：

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

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