エラー：トークンを定義する必要があります。 Angular 2 RC5でテストする場合

Question

2016年6月に、Angular 2アプリケーションのテスト方法に関する記事を書きました。私はangular2-seedを出発点として使用しました。

https://raibledesigns.com/rd/entry/testing_angular_2_0_rc1

私は角2 RC5を使用して角度のCLI（そのmasterブランチから）を使用して、このチュートリアルを、書き直すことにしました。私は私のテストの一つから奇妙なエラーを見ている。 https://github.com/mraible/ng2-demoを：あなたが好きなら、あなたがこの問題を再現することができますので、私はGitHubのにこのプロジェクトを掲載しました

import { provide } from '@angular/core'; 
import { TestComponentBuilder } from '@angular/compiler/testing'; 

import { MockActivatedRoute } from '../shared/search/mocks/routes'; 
import { MockSearchService } from '../shared/search/mocks/search.service'; 

import { EditComponent } from './edit.component'; 
import { ActivatedRoute } from "@angular/router"; 
import { inject } from "@angular/core/testing/test_bed"; 

describe('Component: Edit',() => { 
    var mockSearchService:MockSearchService; 

    beforeEach(() => { 
    mockSearchService = new MockSearchService(); 

    return [ 
     mockSearchService.getProviders(), 
     provide(ActivatedRoute, { useValue: new MockActivatedRoute({ 'id': '1' }) }) 
    ]; 
    }); 

    it('should fetch a single record', inject([TestComponentBuilder], (tcb:TestComponentBuilder) => { 
    return tcb.createAsync(EditComponent).then((fixture) => { 
     let person = {name: 'Emmanuel Sanders', address: {city: 'Denver'}}; 
     mockSearchService.setResponse(person); 

     fixture.detectChanges(); 
     // verify service was called 
     expect(mockSearchService.getByIdSpy).toHaveBeenCalledWith(1); 

     // verify data was set on component when initialized 
     let editComponent = fixture.debugElement.componentInstance; 
     expect(editComponent.editAddress.city).toBe('Denver'); 

     // verify HTML renders as expected 
     var compiled = fixture.debugElement.nativeElement; 
     expect(compiled.querySelector('h3')).toBe('Emmanuel Sanders'); 
    }); 
    })); 
}); 

：

Error: Token must be defined! 
    at new BaseException (/Users/mraible/ng2-demo/src/test.ts:1940:23 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/facade/exceptions.js:27:0) 
    at new ReflectiveKey (/Users/mraible/ng2-demo/src/test.ts:27600:19 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_key.js:36:0) 
    at KeyRegistry.get (/Users/mraible/ng2-demo/src/test.ts:27641:22 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_key.js:77:0) 
    at Function.ReflectiveKey.get (/Users/mraible/ng2-demo/src/test.ts:27615:35 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_key.js:51:0) 
    at ReflectiveInjector_.get (/Users/mraible/ng2-demo/src/test.ts:58418:62 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_injector.js:586:0) 
    at NgModuleInjector.get (/Users/mraible/ng2-demo/src/test.ts:40942:52 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/linker/ng_module_factory.js:98:0) 
    at TestBed.get (/Users/mraible/ng2-demo/src/test.ts:11910:47 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/testing/test_bed.js:269:0) 
    at /Users/mraible/ng2-demo/src/test.ts:11916:61 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/testing/test_bed.js:275:46 
    at Array.map (native) 
    at TestBed.execute (/Users/mraible/ng2-demo/src/test.ts:11916:29 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/testing/test_bed.js:275:0) 

は、ここに私のテストです。

Answer 1

マット、私はyour working codeの関連行であると思うものをコピーして、将来この問題を遭遇する可能性のある人を助ける。

TestBedを@angular/core/testingからインポートしていたとお伝えしましたが、私はまた、angular testing documentation and guidelinesに反映されている模擬サービスの注入のガイダンスに従っていることに気付きました。

私の修正は少し異なりました。これは、私がTestBed.configureTestingModule()メソッドで提供したサービスの1つの誤った名前付けによるものです。あなたのケースでは例えば

、、次のような、新しいMockSearchServiceをインスタンス化し、mockSearchServiceとしてproviders配列にそれを渡す：{provide: SearchService, useValue: mockSearchService}。 ...（総額に注意してください）{provide: SearchService, useValue: MockSearchService}

を...そして得た：

は、私の場合、私は次のように、MockSearchServiceタイプ（注、実際の型ではなく、インスタンス）に渡されますそのサービスのインスタンスは、mockSearchService = fixture.debugElement.injector.get(MockSearchService);です。

しかし、私の場合、私は...injector.get(mockSearchService)として渡された値を誤って綴りました。これは、無効なトークンでインジェクタゲッターに渡されました。だから、私はこの無効なトークンのエラーは、Karma、または未定義のトークンにアクセスしようとしたり、渡そうとするすべてのケースをキャッチするテストプロセスに関与する他のツールの1つによってスローされると思います。物語の道徳的、それはおそらくどこかの変数の誤った名前付けと関係がありました。あなたのケースは少し異なりますが、私はそれが何らかの形で関係していたということはほぼ肯定的です。乾杯！

あなたの作業コード

import { MockSearchService } from '../shared/search/mocks/search.service'; 
// other imports ... 

describe('Component: Edit',() => { 
    let mockSearchService: MockSearchService; 
    // other service declarations... 

    beforeEach(() => { 
     mockSearchService = new MockSearchService(); 
     // other service instances... 

     TestBed.configureTestingModule({ 
      // declarations... 

      providers: [ 
       {provide: SearchService, useValue: mockSearchService}, 

       // other providers... 
      ], 

      // imports... 
     }); 
    }); 

    // Tests ... 

});