Angular 2 karma setup issue -- Karma starts but doesn't run tests

Question

In brief,

I'm creating a project starting with the Plunker code for the Angular 2 "Routing" example (access through the Angular 2 Advanced Tutorial for Routing link). That source doesn't have the Karma or Jasmine configuration baked in.
I've been trying unsatisfactorily to add this to the existing project. My current setup runs karma but doesn't see any tests, either .js or .ts.

14 01 2017 19:16:44.080:WARN [karma]: No captured browser, open http://localhost:9876/
14 01 2017 19:16:44.112:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9876/
14 01 2017 19:16:44.112:INFO [launcher]: Launching browser Chrome with unlimited concurrency
14 01 2017 19:16:44.268:INFO [launcher]: Starting browser Chrome
14 01 2017 19:16:46.895:INFO [Chrome 55.0.2883 (Windows 10 0.0.0)]: Connected on socket [SNIP]

First I started with the the Angular 2 Advanced Tutorial for Testing link. That says I should create /app/1st.spec.ts:

describe('lst tests', () => {
    it('true is true', () => expect(false).toBe(true));
});

I then ran npm test, but found I had no Karma capability. Since then I've installed a variety of packages, based on advice from a programmer's blog. My installations have become:

npm install karma –save-dev
npm install karma-jasmine jasmine-core –save-dev
npm install karma-chrome-launcher –save-dev 
npm install karma-cli
npm install angular-mocks
npm install requirejs karma-requirejs

I ran "karma init" and answered questions best I could. My current karma.conf.js is (condensed):

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'requirejs'],
    files: [
      {pattern: 'app/*.js', included: false},
      {pattern: 'app/*.spec.js', included: false},
      {pattern: 'app/**/*.js', included: false}
    ],
    exclude: [ ],
    preprocessors: { },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

My package.json is:

{
  "name": "MyProgram",
  "version": "0.1.0",
  "license": "MIT",
  "description": "MyProgram description",
    "scripts": {
      "start": "gulp copy-jit && concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "aot": "ngc -p tsconfig-aot.json",
      "rollup": "rollup -c rollup-config.js",
      "start-aot": "npm run aot && npm run rollup && gulp copy-aot && npm run lite",
      "test": "karma start karma.conf.js"
  },
  "dependencies": {
    "@angular/common": "~2.2.4",
    "@angular/compiler": "~2.2.4",
    "@angular/compiler-cli": "~2.2.4",
    "@angular/core": "~2.2.4",
    "@angular/forms": "~2.2.4",
    "@angular/http": "~2.2.4",
    "@angular/platform-browser": "~2.2.4",
    "@angular/platform-browser-dynamic": "~2.2.4",
    "@angular/platform-server": "^2.2.4",
    "@angular/router": "~3.2.4",
    "@angular/upgrade": "~2.2.4",
    "angular-in-memory-web-api": "~0.1.5",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/jasmine": "^2.5.35",
    "@types/node": "^6.0.45",
    "@types/selenium-webdriver": "^2.53.32",
    "concurrently": "^3.0.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-gzip": "^1.4.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-task-listing": "^1.0.1",
    "gulp-util": "^3.0.7",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-requirejs": "^1.1.0",
    "lite-server": "^2.2.2",
    "rollup": "^0.36.1",
    "rollup-plugin-commonjs": "^5.0.4",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "typescript": "^2.0.3"
  }
}

The things I hope to resolve through your responses are:

A proper Angular 2 project configuration for Karma and Jasmine testing.
The ability to create Typescript source code tests and have them detected and run in Karma.

Thanks,

Jerome.

Your link is very good. It explores karma and its various configurations. It also seems -- from the article, from other posters and by my experiences -- that I really must go back to the Quickstart. At this state of Angular 2 maturity there isn't a well-defined way of diagnosing an installation. I should just recreate the project -- or delete node_modules and reinstall. Once I did load Quickstart on my PC I saw lots of little bits that I wasn't going to resolve myself through tinkering. — Jerome P Mrozak
I used the Angular Quickstart to get a "fresh" version of the environment. My libraries translated roughly from version 2.2.4 to 2.4. I copied my code into the new environment. Behold! Things don't work! It seems that developers changed the signature of the Resolve interface. Fortunately the Routing tutorial was also updated, so I had an easy fix. But I thought that with a "greater than Beta" version that interfaces were going to be immutable. /rant — Jerome P Mrozak

JGFMK JGFMK · Accepted Answer · 2017-06-29T16:40:43

I too was trying to go thru the process. I know that if you do ng new using the Angular CLI it will create a project for you with all the Karma stuff setup correctly.
ng test is similar to npm test but seems to spin up far faster too.
The package.json "scripts" section controls the "test" command line option.
I attempted to copy it into the Tour Of Heroes part 6 and managed to successfully do the 1st.spec.ts and get Karma to launch and flip true = true to true = false.
But at the point it said you could load up 1st.spec.ts in Chrome things wouldn't work for me either (Point 5 here).
I documented the way to copy files across here.
You also have the added nuisance that Karma used a version of Node that is behind the times using the LTS release cycle. So it's wise to setup nvm. See here

Angular 2 karma setup issue -- Karma starts but doesn't run tests

1 Answers