0

次の設定で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": {}
}
4

1 に答える 1

0

これは本当に厄介なエラーで、「traceur」が SystemJS transpilerのデフォルト値であることに気付くまでに時間がかかりました。

解決策は、これら 2 つのファイル (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);

于 2016-11-11T15:40:09.807 に答える