Question

我正在尝试使用webpack和Karma运行Angular 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();
});

}）;

如果我注释掉＆＃34; TestBed.createComponent（HeaderBarComponent）＆＃34;测试将运行，但我需要该行才能测试组件不是吗？看起来很多Angular文档使用该行..

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

Angular 2和Jasmine出现错误＆＃34;注入错误错误＆＃34;

1 个答案: