具有业力和茉莉花的Angular2应用会使用多级目录结构引发错误

Question

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) to run, but karma reports:

"Uncaught ReferenceError: describe is not defined"

Here are the relevant code sections:

karma.conf.js

module.exports = function(config) {
config.set({

basePath: '',
frameworks: ['jasmine'],
// these plugins seem to be necessary. Without them, an error about a missing require in app.component.js occurs in karma
plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-htmlfile-reporter')
],

files: [
  'src/client/app/*.js',
  'src/client/app/components/**/*.js'
], 

1st.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }  from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

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

The 1st.spec.ts file is in the 'src/client/app/*.js' folder, which is specified in the files: array of karma.conf.js

What is missing? How do you get Angular2 to recognize jasmine functions? I do not have any of the testing components imported into app.module.ts because I haven't seen any tutorials mention that. Is that the secret? If so what goes in there?

Answer 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, eg, 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.