时间戳

首页 > 解决方案 > 使用角度 6 配置 Jest 时出错

jestjs - 使用角度 6 配置 Jest 时出错

问题描述

我使用以下配置创建了 angualr 项目并尝试使用 jest 安装

package.json 文件如下：

{
    "name": "angular-assessment",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "jest",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "3d-force-graph": "^1.56.5",
        "@angular/animations": "^6.1.0",
        "@angular/cdk": "^6.1.0",
        "@angular/common": "^6.1.0",
        "@angular/compiler": "^6.1.0",
        "@angular/core": "^6.1.0",
        "@angular/forms": "^6.1.0",
        "@angular/http": "^6.1.0",
        "@angular/platform-browser": "^6.1.0",
        "@angular/platform-browser-dynamic": "^6.1.0",
        "@angular/router": "^6.1.0",
        "@ckeditor/ckeditor5-angular": "^1.1.0",
        "@ckeditor/ckeditor5-build-classic": "^12.4.0",
        "@gustafguner/angular-tooltip": "^1.0.0",
        "@ng-bootstrap/ng-bootstrap": "^4.1.3",
        "circular-json": "^0.5.9",
        "core-js": "^2.5.4",
        "event-stream": "^4.0.1",
        "gojs": "^2.1.12",
        "gulp-cli": "^2.2.0",
        "gulp-replace": "^1.0.0",
        "gulp-util": "^3.0.8",
        "microsoft-adal-angular6": "^1.3.0",
        "ngx-color": "^4.0.0",
        "ngx-color-picker": "^7.5.0",
        "ngx-contextmenu": "^5.2.0",
        "ngx-draggable-widget": "^1.0.7",
        "ngx-image-zoom": "^0.3.4",
        "ngx-order-pipe": "^2.0.2",
        "ngx-toggle-switch": "^2.0.5",
        "ngx-ui-loader": "^7.2.2",
        "rxjs": "~6.2.0",
        "sp-pnp-js": "^3.0.10",
        "zone.js": "~0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.8.0",
        "@angular/cli": "~6.2.5",
        "@angular/compiler-cli": "^6.1.0",
        "@angular/language-service": "^6.1.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/jest": "^26.0.23",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.3.0",
        "gulp": "^4.0.2",
        "gulp-spsave": "^3.1.1",
        "husky": "^4.2.5",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "jest": "^27.0.4",
        "jest-preset-angular": "^9.0.4",
        "karma": "~3.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "lint-staged": "^10.2.11",
        "prettier": "2.0.5",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~2.9.2"
    },
    "jest": {
        "preset": "jest-preset-angular",
        "setupTestFrameworkScriptFile": "<rootDir>/setupJest.ts"
      }
}

setupJest.ts 文件包含以下代码：

import 'jest-preset-angular';

在 npm 测试时收到此错误

Error: Cannot find module '@angular/compiler-cli/src/ngtsc/reflection'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)

我按照这个链接：

1] https://timdeschryver.dev/blog/integrate-jest-into-an-angular-application-and-library 2] https://www.amadousall.com/how-to-set-up-angular-unit -测试与开玩笑/

标签： jestjsangular6ts-jest

解决方案

您所有的软件包都非常旧且过时，这给您带来了很多问题。您可以将鼠标悬停在每个包上并将它们更新为 Angular 的当前版本 12，您在 AngularJS 上进行 angular-build，其余为 Angular 6。

因此，如果我是您，我会做的是单独安装它们或生成一个新的 Angular 应用程序。根据谷歌的说法，这是生命周期的终止，因为 LTS 在三年前就到期了。

在你做那个更新之前

npm uninstall @angular/cli -g
npm install @angular/cli -g
ng n angularjesttest
cd angularjesttest

然后从 npm 重新安装每个包作为当前平台版本，这是旧包的问题。

推荐阅读