angular - Jest 26 & Angular - 错误地报告了错误行号

标签 angular jestjs tsconfig ts-jest

自从升级到 Jest 26 和 Angular 10 以来,单元测试错误行号被错误地报告。我从 Angular 4 开始就一直在使用 Jest,并且在每个新版本中都进行了升级。
我已经通读了关于此的所有现有文章,并尝试了我能找到的所有建议。它们似乎都不适用于我的情况。
我已经能够创建一个最小的存储库,您可以在其中看到这种情况( https://github.com/russcarver/angular-jest-test/tree/jest-line-errors )。确保您在 jest-line-errors 上分支。我在 app.component.spec.ts 文件( https://github.com/russcarver/angular-jest-test/blob/jest-line-errors/src/app/app.component.spec.ts )中添加了注释以显示问题。
奇怪的是,第一个是我必须在每个规范文件的顶部添加一个“虚拟”测试。否则,每个文件中的第一个测试总是失败:

it('Should init the Test Suite', noop); // ****** The first test fails unless I add this ******
当其他方法都不起作用时,我绝望地创建了这个解决方案。我有一种预感它是相关的。
这个特殊的 Angular 升级还建议将 tsconfig.json 文件拆分为 tsconfig.base.json、tsconfig.app.json 和 tsconfig.spec.json。
当我更改 tsconfig.spec.json 中的各种选项时,错误行号会发生变化(特别是 libmoduletarget 选项)。我已将此文件配对到我的(大型)项目所需的最低限度,并在 repo 中对其进行了修改以不扩展 tsconfig.base.json。我还研究并设置了我认为最适合我的项目的选项(针对最新的 2 个版本的 Chrome、Edge Safari 和 FireFox,并使用所有最新的 JavaScript 和 TypeScript 功能)。
我知道这不是 Angular 问题,因为我已经能够用 Angular 9、10 和 11 重现这个问题。在所有 tsconfig 更改之前,它曾经在 Angular 9 和 Jest 25 中工作。
我也知道(已经测试过)它与规范文件中的空行或注释无关。
我也尝试了 Babel 配置无济于事。
我以前用过jest-preset-angular (现在已弃用)但添加/删除没有任何区别。
无论是否启用/运行覆盖率,都会错误地报告行号。
自去年七月(2020 年)以来,我们一直在受苦。任何帮助将不胜感激!

最佳答案

这似乎在我之后解决了:

  • 升级到 Angular 12.0.5
  • 更新为 "@types/jest": "26.0.23", "@angular-builders/jest": "12.0.0", "@types/jasmine": "3.7.7", "@types/jasminewd2": "2.0.9", "jasmine-core": "3.7.1", "jasmine-spec-reporter": "7.0.0", "jest": "26.6.3", "ts-jest": "26.5 .6”和“ts-node”:“10.0.0”
  • 我还删除了 Babel 配置。
  • 注意:我尝试升级到 Jest 27,结果一团糟。

  • 我不确定哪些部分负责修复,但这是我的 package.json 文件。我很乐意应要求提供其他文件。
    {
      "scripts": {
        "build": "npm run lint && npm run test-build && ng build --configuration=development",
        "build:dynamic": "npm run lint && npm run test-build && ng build --configuration=dynamic && npm run obfuscate",
        "lint": "ng lint",
        "ng": "ng",
        "obfuscate": "ng run resolver:obfuscate --configuration=production",
        "postinstall": "ngcc --tsconfig './tsconfig.app.json'",
        "refresh-project": "rimraf coverage/* && rimraf dist/* && rimraf node_modules/* && npm install",
        "start": "ng serve --host=0.0.0.0 --port 4200 --configuration=development",
        "start-dynamic": "ng serve --host=0.0.0.0 --port 4200 --configuration=dynamic",
        "test": "ng test -- --coverage --coverage-reporters=text-summary --coverage-reporters=lcov",
        "test-build": "ng test -- --coverage --coverage-reporters=text-summary --coverage-reporters=cobertura",
        "test-watch": "ng test -- --watch"
      },
      "private": true,
      "dependencies": {
        "@agm/core": "1.1.0",
        "@angular/animations": "12.0.5",
        "@angular/cdk": "12.0.5",
        "@angular/common": "12.0.5",
        "@angular/compiler": "12.0.5",
        "@angular/core": "12.0.5",
        "@angular/forms": "12.0.5",
        "@angular/material": "12.0.5",
        "@angular/platform-browser": "12.0.5",
        "@angular/platform-browser-dynamic": "12.0.5",
        "@angular/router": "12.0.5",
        "@auth0/angular-jwt": "5.0.2",
        "@google/markerclusterer": "2.0.9",
        "@material-extended/mde": "3.0.3",
        "@microsoft/applicationinsights-web": "2.6.3",
        "@microsoft/signalr": "5.0.7",
        "@okta/okta-angular": "3.1.0",
        "@srag/ngx-source-obfuscation": "2.0.0",
        "@types/file-saver": "2.0.2",
        "@types/googlemaps": "3.43.3",
        "@types/jest": "26.0.23",
        "@types/node": "14.17.3",
        "@types/sjcl": "1.0.29",
        "angular-user-idle": "2.2.6",
        "angulartics2": "10.0.0",
        "broadcast-channel": "3.7.0",
        "browser-globals": "0.0.2",
        "core-js": "3.10.0",
        "cross-env": "7.0.3",
        "date-fns": "2.22.1",
        "date-fns-tz": "1.1.4",
        "file-saver": "2.0.5",
        "gsap": "3.7.0",
        "hammerjs": "2.0.8",
        "kaop-ts": "4.3.0",
        "launchdarkly-js-client-sdk": "2.19.2",
        "ng2-file-upload": "1.4.0",
        "ngx-currency": "2.5.2",
        "ngx-mask": "12.0.0",
        "npm": "7.17.0",
        "rxjs": "6.6.7",
        "sass": "1.35.1",
        "save": "2.4.0",
        "sjcl": "1.0.8",
        "time-input-polyfill": "1.0.10",
        "web-animations-js": "2.3.2",
        "zone.js": "0.11.4"
      },
      "devDependencies": {
        "@angular-builders/jest": "12.0.0",
        "@angular-devkit/build-angular": "12.0.5",
        "@angular/cli": "12.0.5",
        "@angular/compiler-cli": "12.0.5",
        "@angular/language-service": "12.0.5",
        "@types/jasmine": "3.7.7",
        "@types/jasminewd2": "2.0.9",
        "codelyzer": "6.0.2",
        "crypto-browserify": "3.12.0",
        "jasmine-core": "3.7.1",
        "jasmine-spec-reporter": "7.0.0",
        "jest": "26.6.3",
        "jest-date-mock": "1.0.8",
        "jest-trx-results-processor": "2.2.0",
        "jest-zone-patch": "0.0.10",
        "rimraf": "3.0.2",
        "stream-browserify": "3.0.0",
        "ts-jest": "26.5.6",
        "ts-node": "10.0.0",
        "tslint": "6.1.3",
        "tslint-eslint-rules": "5.4.0",
        "typescript": "4.2.4",
        "webpack-bundle-analyzer": "4.4.2"
      },
      "engineStrict": true,
      "engines": {
        "node": "14.17.0",
        "npm": "7.17.0"
      }
    }
    

    关于angular - Jest 26 & Angular - 错误地报告了错误行号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66550875/

    相关文章:

    css - Angular 5 - 链接到 node_module 文件夹中的 css 文件

    reactjs - 开 Jest : ReferenceError: KeyframeEffect is not defined

    typescript - 创建 react 应用程序 typescript 不加载 d.ts 文件

    typescript :tsconfig.json outDir 属性不起作用

    具有动态嵌套组件的 Angular 循环依赖项

    javascript - 在标记页面中,如何向 html 标记的 textContent 属性添加内容?

    javascript - 如何使用 enzyme 作为实例()测试功能组件内部的方法,为浅包装器返回 null?

    typescript :严格检查 "Any"

    c# - 在单个 ASP.NET Core 3.1 Web API 中管理两个 SPA;一个在根目录中,另一个在 "admin"路由中

    reactjs - 为什么在 Jest 测试中 async() 会转变为 async function()?