無法使用Karma和Jasmine進行Angular應用程序的單元測試

Question

嘗試對Angular（不是AngularJS）應用程序進行單元測試。

這是package.json

  "dependencies": {
    "@angular-redux/store": "^6.4.2",
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "5.1.1",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/material": "5.1.1",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/platform-server": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@progress/kendo-angular-buttons": "^3.0.4",
    "@progress/kendo-angular-dateinputs": "^2.2.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^2.1.2",
    "@progress/kendo-angular-inputs": "^2.2.0",
    "@progress/kendo-angular-intl": "^1.3.2",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-data-query": "^1.2.1",
    "@progress/kendo-drawing": "^1.5.1",
    "@progress/kendo-theme-bootstrap": "2.11.8",
    "@progress/kendo-theme-default": "^2.49.0",
    "angular2-jwt": "^0.2.2",
    "angular2-moment": "^1.7.0",
    "angular2-recaptcha": "^0.6.0",
    "angular5-recaptcha": "0.0.2",
    "core-js": "^2.4.1",
    "echarts": "^3.5.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "immutability-helper": "2.6.0",
    "jquery": "^3.2.1",
    "jquery-slimscroll": "^1.3.8",
    "mdn-polyfills": "^3.1.0",
    "ng2-validation": "^4.2.0",
    "ngx-pagination": "^3.0.1",
    "popper.js": "^1.12.5",
    "redux": "^3.6.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.2.5",
    "webfontloader": "^1.6.27",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "1.7.0",
    "@angular/compiler-cli": "^5.2.9",
    "@angularclass/hmr": "^1.2.2",
    "@angularclass/hmr-loader": "^3.0.2",
    "@types/core-js": "^0.9.41",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "~2.8.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/jquery": "^2.0.41",
    "@types/node": "^7.0.12",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular-router-loader": "^0.6.0",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^6.7.7",
    "awesome-typescript-loader": "^3.1.2",
    "bootstrap": "~4.0.0-alpha.6",
    "browser-sync": "^2.18.8",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "del": "^2.2.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "gulp": "~3.9.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-open": "~2.0.0",
    "gulp-plumber": "~1.1.0",
    "gulp-pug": "~3.3.0",
    "gulp-task-listing": "~1.0.0",
    "gulp-util": "~3.0.4",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "ng-router-loader": "^2.1.0",
    "postcss-loader": "^1.3.3",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.4",
    "style-loader": "^0.16.1",
    "ts-helpers": "^1.1.2",
    "ts-node": "^3.0.2",
    "tslib": "^1.6.0",
    "tslint": "^5.0.0",
    "typescript": "^2.7.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "~2.3.0",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "^4.1.0",
    "yargs": "^7.0.2",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "^0.3.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2"
  },
  "engines": {
    "node": ">=6.9.0",
    "npm": ">= 3"
  }
}

這是tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

這是karma.config.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

具有以上詳細信息，ng測試引發了以下錯誤12 07 2018 11：12：27.391：INFO [Chrome 67.0.3396（Windows 7.0.0）]：連接到套接字Y_50WuISYFnxSEPLAAAA，ID為9725077 Chrome 67.0.3396（Windows 7.0.0） ）錯誤未捕獲的錯誤：丟失：SyncTestZoneSpec位於http：// localhost：9877 / _karma_webpack_ / vendor.bundle.js：202926

我試圖通過添加以下對業力配置的引用來基於https://github.com/angular/zone.js/issues/404更新karma.config.js

  require('zone.js/dist/zone'),
  require('zone.js/dist/long-stack-trace-zone'),
  require('zone.js/dist/async-test'),
  require('zone.js/dist/fake-async-test'),
  require('zone.js/dist/sync-test'),
  require('zone.js/dist/proxy-zone'), // since zone.js 0.6.14
  require('zone.js/dist/jasmine-patch') // put here since zone.js 0.6.14

我在2018年12月7日11：39：54.918：ERROR [config]之后看到以下錯誤：配置文件錯誤！ ReferenceError：未在patchXHR上定義XMLHttpRequest （node_modules \\ zone.js \\ dist \\ zone.js：2892：39）

有什么想法嗎

Answer 1

顯然，我正在使用zone.js詳細信息更新業力配置，而應在tests.ts上進行更新，並且與全新的應用程序進行比較，並嘗試使它們之間的差異盡可能小，這也是一個好主意。

當我們從一個Angular版本更新到另一個版本時，我們最初是從版本2開始的，當我們升級到版本5時，存在許多差異，並且其中任何一個都可能會崩潰。

我還比較了package.json，karma.config.js和tsconfig.json的文件。

它成功了。