An Angular2 App With Karma & Jasmine Throws Errors With Multi-level Directory Structure

I am building an Angular 2 app with the current 4.0.0-beta.1 release. After many hours of struggle, I got karma running. I'm now trying to get a jasmine tautology test (true=true)

Solution 1:

After weeks of reading tutorials, karma docs, and buying ng-book2, I discovered that no one describes how to set test configs when app.component.ts is several levels down in the directory structure. Karma docs may explain this, but the docs are so verbose and abstract, without examples, I was not able to gain any meaning from them. I also found that Angular's quickstart apps have various 'secret sauces' to enable karma & jasmine testing, e.g., karma-test-shim.js (which you cannot get via npm).

With no help from the above docs, I re-started with Angular's Setup. Setup uses systemjs. AngularCLI uses Webpack. Read about this. It makes a difference for my solution below and for your longer term actions. Jasmine tests work off the shelf for Angular Setup's Quickstart. I nudged the directory structure to my multi-level and tweaked lots of things to find configs that kept karma & jasmine working. Bottom line - Systemjs and karma.config.js both have to change - together. A change in only 1 of them just creates new and novel console errors.

Systemjs - change app: in the map object to your path. In my case, its

map: {
  app: 'src/client/app',
  // the rest of map
}

karma.conf.js - change appBase and appSrcBase in the module.exports function

var appBase    = 'src/client/app/';  //originally appBase='app/';var appSrcBase = 'src/client/app/';

The Console errors make it sound like the problem is in the @angular bundle paths. Changes there just created different errors. Don't get sucked in.

Hope this saves you lots of time in getting tests going on an app that has a real life directory structure.