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测试抛出以下错误 2018年12月7日11：12：27.391：INFO [Chrome 67.0.3396（Windows 7.0.0）]：连接到ID为9725077的套接字Y_50WuISYFnxSEPLAAAA Chrome 67.0.3396（Windows 7.0.0）错误 未捕获的错误：缺少：SyncTestZoneSpec 在http://localhost:9877/_karma_webpack_/vendor.bundle.js:202926

我尝试根据以下内容更新karma.config.js： https://github.com/angular/zone.js/issues/404 通过添加以下对业力配置的引用

  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：未定义XMLHttpRequest 在patchXHR（node_modules \ zone.js \ dist \ zone.js：2892：39）

任何想法

Answer 1

很显然，我正在使用zone.js详细信息更新业力配置，而应在 tests.ts 上进行更新，并且与全新的应用程序进行比较并尝试保持它们之间的差异应尽可能小。

当我们从一个Angular版本更新到另一个版本时，我们最初是从版本2开始的，随着我们逐步发展到版本5，存在许多差异，并且其中任何一个都可能会崩溃。

我还比较了 package.json，karm.config.js，tsconfig.json 的文件。

成功了。

无法使用Karma和Jasmine单元测试Angular应用程序

1 个答案: