angular - Angular 2 测试设置

Question

我正在尝试使用以下设置测试 Angular 2 组件：

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;
});

...但是我在控制台中不断收到以下错误，并且由于缺少信息性错误消息，我不知道我的设置有什么问题：

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

Answer 1

这确实是一个恼人的错误，我花了一些时间才意识到“traceur”是 SystemJS transpiler的默认值。

解决方案是按如下方式调整这两个文件（karma.conf.js 和 karma-test-shim.js），以便 typescript 获取您的转译器：

业力.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
  })
}

业力测试-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);