誤差

Question

我試圖運行角2個測試用的WebPack和因果報應，但我得到一個錯誤角2和茉莉花「在注射錯誤錯誤」：

Chrome 57.0.2987 (Windows 7 0.0.0) HeaderBarComponent should have a defined component FAILED 
    Error 
     at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1231:21 <- test/index.js:1558:86) [angular] 
     at noProviderError (webpack:///~/@angular/core/@angular/core.es5.js:1269:0 <- test/index.js:1596:12) [angular] 
     at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/@angular/core.es5.js:2770:0 <- test/index.js:3097:19) [angular] 
     at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/@angular/core.es5.js:2809:0 <- test/index.js:3136:25) [angular] 
     at ReflectiveInjector_._getByKey (webpack:///~/@angular/core/@angular/core.es5.js:2741:0 <- test/index.js:3068:25) [angular] 
     at ReflectiveInjector_.get (webpack:///~/@angular/core/@angular/core.es5.js:2610:0 <- test/index.js:2937:21) [angular] 
     at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/@angular/core.es5.js:3557:0 <- test/index.js:3884:52) [angular] 
     at resolveDep (webpack:///~/@angular/core/@angular/core.es5.js:10930:0 <- test/index.js:11257:45) [angular] 
     at createClass (webpack:///~/@angular/core/@angular/core.es5.js:10791:0 <- test/index.js:11118:91) [angular] 
     at createDirectiveInstance (webpack:///~/@angular/core/@angular/core.es5.js:10627:21 <- test/index.js:10954:37) [angular] 
     at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:11977:33 <- test/index.js:12304:49) [angular] 
     at createRootView (webpack:///~/@angular/core/@angular/core.es5.js:11882:0 <- test/index.js:12209:5) [angular] 
     at callWithDebugContext (webpack:///~/@angular/core/@angular/core.es5.js:13013:25 <- test/index.js:13340:42) [angular] 
     at Object.debugCreateRootView [as createRootView] (webpack:///~/@angular/core/@angular/core.es5.js:12474:0 <- test/index.js:12801:12) [angular] 
Chrome 57.0.2987 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.949 secs/0.531 secs) 

頭-bar.spec.ts：

import { TestBed, async, inject } from '@angular/core/testing'; 
import { RouterModule, Router} from '@angular/router'; 
import { FlexLayoutModule } from '@angular/flex-layout'; 
import { MaterialModule } from '@angular/material'; 

import { HeaderBarComponent } from '../../../src/app/components/layout/header-bar/header-bar.ts'; 

describe('HeaderBarComponent',() => { 

var component; 

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [RouterModule, MaterialModule, FlexLayoutModule], 
     declarations: [HeaderBarComponent] 
    }); 

    **// error occurs on this line** 
    const fixture = TestBed.createComponent(HeaderBarComponent); 
    component = fixture.componentInstance; 
}); 

it('should have a defined component',() => { 
    expect(component).toBeDefined(); 
}); 

}）;

如果我註釋掉「TestBed.createComponent（HeaderBarComponent）」測試將運行，但我需要這條線才能夠測試組件不是嗎？貌似很多角文檔的使用線..

Answer 1

它看起來像你沒有寫額外的功能：

... 
beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
//Mainly you don't need RouterModule here 
     imports: [MaterialModule, FlexLayoutModule], 
     declarations: [HeaderBarComponent] 
    }) 
//Do not forget to compile the component 
    .compileComponents(); 

const fixture = TestBed.createComponent(HeaderBarComponent); 
component = fixture.componentInstance; 
//Do not forget to call that method when u need 
// to trigger change detection 
fixture.detectChanges(); 
})); 
...