Angular2: unable to test component using templateUrl with TestBed.compileComponent ()

Question

I am trying to get the basics of the Angular2 test API, and TestBed.compileComponents () turns me on. Or I call it like this:

beforeEach( done => { TestBed.configureTestingModule({ declarations: [MyComponent] }) .compileComponents().then( () => { fixture = TestBed.createComponent(MyComponent); component = fixture.componentInstance(); }); done(); }); 

And then my component is undefined in my test (I believe that since compileComponent isync, the test runs before my var component gets the value)

In the same way (as described in the documentation ):

 beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [MyComponent] })) .compileComponents(); beforeEach( () => { fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance(); }); 

But then I get the error: This test module uses the component HomeComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. This test module uses the component HomeComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test.

Can anyone help with this?

Forget to say that I use webpack and RC6

Answer 1

Try the following:

 describe('FooComponent', function () { let fixture: ComponentFixture<FooComponent>; beforeEach(() => { TestBed.configureTestingModule({ declarations: [FooComponent] }); fixture = TestBed.createComponent(FooComponent); fixture.detectChanges(); }); 

Here you do not need asynchrony.

Answer 2

Try the following:

 beforeEach( async( () => { TestBed.configureTestingModule({ declarations: [MyComponent] }) .compileComponents().then( () => { fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance(); }); })); 

Answer 3

I encountered the same problem, despite the fact that I tested the components that moved the test to another folder, and I managed to check the component.

Here is an example that works, in my component there is a boolean name "isLoggedIn", which I checj if the user is registered

 import { async, TestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import { MyComponent } from './MyComponent'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { UserService } from '../../app/shared/services/userService'; describe('ContentComponentTest', () => { // Instance of data-model.spec let dataModel = new DataModels(); let userServiceStub: any = { getUserCookie() { return 'John'; } }; beforeAll(() => { TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); }); beforeEach(() => { TestBed.configureTestingModule({ declarations: [MyComponent], providers: [ { provide: UserService, useValue: userServiceStub }], schemas: [NO_ERRORS_SCHEMA] }); }); it('Test if user isLoggedIn', async(() => { // Overrides here, if you need them TestBed.overrideComponent(MyComponent, { set: { template: '<div>Overridden template here</div>' // ... } }); TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(MyComponent); // Access the dependency injected component instance const app = fixture.componentInstance; expect(app.isLoggedIn).toBe(false); // Detect changes as necessary app.ngOnInit(); fixture.detectChanges(); expect(app.isLoggedIn).toBe(true); }); })); }); 

However, for suppliers injected into a specific component, you will have to mock them. For instance:

 providers: [ {provide: UserService, useValue: userServiceStub } ] 

Answer 4

I ran into the same problem. I think the problem is in your component template. If you use some other custom components, but did not specify them in the testing module, than Angular throws this error (of course, very misleading).

So, you have the following options:

• List all components used in the TestBed configuration
  • As an option to this, you can drown out all components with appropriate layouts.
• use NO_ERRORS_SCHEMA for small testing as described here https://angular.io/docs/ts/latest/guide/testing.html#shallow-component-test

Answer 5

Just in order to base Sonkil’s answer, I found that this worked, I had to actually install the device and create a component in the test. For instance:

 it('test the component renders',() => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; fixture.detectChanges(); expect(comp).toBeDefined(); });