錯誤：令牌必須被定義！當用Angular 2 RC5測試時

Question

早在2016年6月，我寫了一篇關於如何測試Angular 2應用程序的文章。我用angular2-seed作爲起點。

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

我決定重寫使用角CLI（從其主分支）本教程，它採用角2 RC5。我從我的一個測試中看到一個奇怪的錯誤。

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) 

這裏是我的測試：

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

我已爲這個項目的GitHub這樣你就可以，如果你喜歡重現此問題：https://github.com/mraible/ng2-demo。

Answer 1

Matt，我已經複製了我認爲相關的your working code這幾行，以幫助任何可能在將來遇到這個問題的人。

你提到你的修復是從@angular/core/testing導入TestBed，我注意到你也遵循了注入模擬服務的指導，反映在angular testing documentation and guidelines中。

我的修復有點不同;這是因爲我在TestBed.configureTestingModule()方法中提供的服務中有一個是錯誤的。

例如，你的情況，你實例化一個新MockSearchService並把它傳遞到providers陣列mockSearchService，因爲這樣：{provide: SearchService, useValue: mockSearchService}。

在我的情況，我在MockSearchService型（注意，實際的類型，而不是一個實例）通過如下：{provide: SearchService, useValue: MockSearchService}（注意大小寫）...

...然後起身該服務的一個實例如下：mockSearchService = fixture.debugElement.injector.get(MockSearchService);。

但是，在我的情況下，我錯誤拼寫了我傳入的值...injector.get(mockSearchService)，這是一個無效令牌傳遞給注入器獲取器。所以，我認爲這個無效的令牌錯誤是由Karma或其他測試過程中涉及的其他工具之一引發的，因爲它試圖訪問或傳入未定義的令牌。這個故事的道德觀，可能與某處變量的錯誤認識有關。你的情況有點不同，但我幾乎肯定它有某種關係：]。乾杯!

你的工作代碼

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 ... 

});