Error with Angular 2 and Jasmine "Error at Injection Error"

Question

I am trying to run Angular 2 tests with webpack and Karma but am getting an error:

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)

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

});

If I comment out "TestBed.createComponent(HeaderBarComponent)" the test will run but I need that line to be able to test the component don't I? Looks like a lot of the Angular docs use that line..

Answer 1

It's looks like you didn't write extra functions:

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