Angular 2 test setup

Question

I'm trying to test an Angular 2 component with the following setup:

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

import { GroceriesListComponent } from './groceries-list.component';
import { GroceryService }        from './grocery.service';

let comp: GroceriesListComponent;
let fixture: ComponentFixture<GroceriesListComponent>;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [GroceriesListComponent],
    providers:    [GroceryService]
  });

  fixture = TestBed.createComponent(GroceriesListComponent);
  comp = fixture.componentInstance;

  _groceryService = fixture.debugElement.injector.get(GroceryService);

  spy = spyOn(_groceryService, 'getGroceries')
    .and.returnValue(Promise.resolve(testGroceries));

  de = fixture.debugElement.query(By.css('li'));
  el = de.nativeElement;
});

...but I keep getting the following error in my console and due to the lack of an informative error message I'm lost as to what is wrong with my setup:

404: /base/traceur
ERROR
{
  "originalErr": {}
}

Answer 1

This is really an annoying error and it took some time until I realized that "traceur" is the default value for SystemJS transpiler.

The solution was to adapt those two files (karma.conf.js and karma-test-shim.js) as follows so that typescript gets your transpiler:

karma.conf.js

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

    basePath: '',

    frameworks: ['jasmine'],

    files: [
      // Polyfills.
      'node_modules/es6-shim/es6-shim.js',

      // .. more files such as reflect, systemjs, zones, rxjs ...

      // load typescript as well !!!!!!!!!!!!!!!!!!!!!!!
      { pattern: 'node_modules/typescript/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/typescript/**/*.js.map', included: false, watched: false },

      { pattern: 'karma-test-shim.js', included: true, watched: true},
   
      // load angular and your own code

    ],

    // proxied base paths
    proxies: {
      // required for component assests fetched by Angular's compiler
      "/dist/": "/base/dist/"
    },

 // karma config ...
 
    singleRun: false
  })
}

karma-test-shim.js

// Load our SystemJS configuration.

System.config({
    baseURL: '/base'
});

System.config(
    {
        // set the transpiler here !!!!!
        transpiler: 'typescript',
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        map: {
            'dist': 'dist',
   
            // mapping for typescript !!!!!!!!!!!!!
            'typescript': 'npm:typescript/lib/typescript.js',
   
            // ... more mappings
   
            // other libraries
            'rxjs': 'npm:rxjs'
        },
        packages: {
            'dist': {
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            }
        }
    });

Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
 // ...
}).then(function() {
 // ...
}).then(__karma__.start, __karma__.error);