Unable to Unit test Angular application using Karma and Jasmine

[skjagini]

Trying to unit test Angular (not AngularJS) application.

Here is the 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"
      }
    }

Here is 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"
        ]
      }
    }

Here is 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
      });
    };

With the above details ng test was throwing the following error
12 07 2018 11:12:27.391:INFO [Chrome 67.0.3396 (Windows 7.0.0)]: Connected on socket Y_50WuISYFnxSEPLAAAA with id 9725077
Chrome 67.0.3396 (Windows 7.0.0) ERROR
Uncaught Error: Missing: SyncTestZoneSpec
at http://localhost:9877/_karma_webpack_/vendor.bundle.js:202926

I tried to update the karma.config.js based on the
#404
by adding following references to karma config

      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

I see the following error there after
12 07 2018 11:39:54.918:ERROR [config]: Error in config file!
ReferenceError: XMLHttpRequest is not defined
at patchXHR (node_modules\zone.js\dist\zone.js:2892:39)

Any thoughts

Sorry, if I am reposting it, as I have already posted it here:
https://stackoverflow.com/questions/51310070/unable-to-unit-test-angular-application-using-karma-and-jasmine

[skjagini]

I created a new application and matched the files between them and found that tests.ts and karma config were not updated accordingly.

This fixed the issue.