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

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.

Answer 1

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