AngularJS 2 unit testing component with jasmine facing error, Cannot read property 'firstChild' of null

Question

I am writing unit test for my angular 2 application, I am trying to test the component I made. I am referring to a sample git repository for writing test cases in angular 2 using TypeScript and Jasmine framework. I did same what is done in sample repository (https://github.com/juliemr/ng2-test-seed) to test my component but i get following error.

TypeError: Cannot read property 'firstChild' of null
at Object.el (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:537:29)
at TestComponentBuilder.createAsync (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:841:28)
at eval (http://127.0.0.1:9090/app/test/search.component.specs_test.js:95:32)
at FunctionWrapper.apply (http://127.0.0.1:9090/node_modules/angular2/bundles/angular2.dev.js:327:17)
at FunctionWithParamTokens.execute (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:1947:37)
at TestInjector.execute (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:1868:17)
at Object.<anonymous> (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:2006:44)
at attemptAsync (http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1916:24)
at QueueRunner.run (http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1871:9)
at http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1898:16

My component is like this:

@Component({
  selector: 'search',
  templateUrl: 'app/html/search.component.html',
  styleUrls: ['app/css/search.css'],
  providers: [SearchService,SearchUtil],
  directives: [OverviewComponent]
})
export class SearchComponent {}

My unit test case looks like this:

it('should populate search suggestions UI', injectAsync([TestComponentBuilder,SearchComponent], (tcb) => {
    return tcb.createAsync(SearchComponent).then((fixture) => {
      fixture.detectChanges();
      var compiled = fixture.debugElement.nativeElement;

      compiled.querySelector('search').value('teachers');
      fixture.detectChanges();

      var compiled = fixture.debugElement.nativeElement;

      console.log(compiled.querySelector('search').value()+" = "+compiled.querySelector('.searchlist>a').length);

      expect(compiled.querySelector('.searchlist>a').length).toBeGreaterThan(1);
    });
  }));

I am getting error, in this line - tcb.createAsync(SearchComponent), says the object is null.

Thierry Templier · Accepted Answer · 2016-04-11 13:37:26Z

2

You don't need to specify SearchComponent into the first parameter of the injectAsync function:

it('should populate search suggestions UI', 
       injectAsync([TestComponentBuilder], (tcb) => {
  return tcb.createAsync(SearchComponent).then((fixture) => {
    (...)
  });
}));

Edit

You also need to the base test providers, as described below:

import {setBaseTestProviders} from 'angular2/testing';

import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

describe('Some tests', () => {
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, 
                   TEST_BROWSER_APPLICATION_PROVIDERS);
  (...)
});

Edit1

You need to register the providers your component will use (directly or indirectly) using the beforeEachProviders function.

Here is a sample:

beforeEachProviders(() => {
  return [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: MockBackend }),
    HttpService
  ];
});

edited Apr 11, 2016 at 13:37

answered Apr 11, 2016 at 12:45

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Prakash Over a year ago

had tried the way you mentioned earlier but no luck I get same error.

Prakash Over a year ago

I tried those changes, but now I am getting this error, No provider for Token DocumentToken!

Thierry Templier Over a year ago

Do you set the providers you need using the beforeEachProviders function? Especially the DocumentToken one...

Prakash Over a year ago

Yes I do have it in my test code,

beforeEachProviders(() => {     return [       SearchService,       RouteRegistry,DirectiveResolver,ViewResolver,       provide(Location, { useClass: SpyLocation }),       provide(ROUTER_PRIMARY_COMPONENT, { useValue: EnterpriseSearchComponent }),       provide(Router, { useClass: RootRouter }), SearchService, Jsonp,       SearchUtil, SearchComponent, JSONP_PROVIDERS, Solrconfig, AppConfig,       TestComponentBuilder     ]   });

Prakash Over a year ago

Hey, I added these two TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS in beforeEachProviders and now the test is failing, which means its working :), thanks for your help

Collectives™ on Stack Overflow

AngularJS 2 unit testing component with jasmine facing error, Cannot read property 'firstChild' of null

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related