Minimal unit test setup Visual Studio 2017, Karma, Jasmine, Angular2, Typescript

Coming from the .net world setting up a first unit test for my angular side project was a very painful experience. Due to the sheer amount of frameworks and configuration I had to put a lot of time into it and spend a lot of time googling. The number of frameworks doesn't help and it's difficult to find exactly the same combination that you've chosen for your project. I've decided to use Karma because it was used in one of the first Visual Studio + Karma + Typescript tutorial I've found (later I've learnt from my close friend that it wasn't the best of choices).

I've decided to use the Visual Studio 2017 + ReSharper, first because I love these tools, second because I had my Azure WebJob and my WebService projects in the same solution as my angular2 based website.

It took a lot of time for me to go through it (after quite a bit of time I was able to run my tests from ReSharper but my goal was to make it run using either gulp tasks or NPM scripts tasks. After many retrials and tests I've narrowed down my Karma config (karma.conf.js) to the one below:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

module.exports = function (config) { config.set({ frameworks: ['jasmine', 'karma-typescript'], files: [ 'tests/**/*.js', 'tests/**/*.ts' ], karmaTypescriptConfig: { compilerOptions: { module: 'commonjs', target: 'es2015' }, tsconfig: 'tsconfig.json' }, preprocessors: { '**/*.ts': ['karma-typescript'] }, reporters: ['progress', 'htmlDetailed'], plugins: [ 'karma-phantomjs-launcher', 'karma-jasmine', 'karma-typescript', 'karma-html-detailed-reporter' ], htmlDetailed: { splitResults: false }, port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'] }); }

Most of the errors I was receiving stemmed from the miss-configuration, and the fact that I was missing some dependencies. Karma is very configurable and most probably using something more simple like Tape would have set me off much faster.

Others steps I've taken to make it run/troubleshoot:
- installed Task Runner Explorer extension, which gives a nice gui for the tasks
- I've checked running the tests both in PhantomJS and headless Chrome
- when I was looking for errors I've switched logging level to Verbose, being able to see the logs being displayed in the Task's Runner output was something, which has greatly helped me pinpoint different issues
- using karma-typescript pre-processor for the ts files along with its config helped me with a lot of errors caused by unexpected token errors
- many of the errors were related to the incorrect module system or ecma script version
- first unit test (or spec file) which I've successfully launched was also my 'proof of concept' and was really simple:

1 2 3

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