Angular2 Inject ElementRef in unit test

Question

I am trying to test a component that receives a reference to ElementRef through DI.

import { Component, OnInit, ElementRef } from '@angular/core';  @Component({   selector: 'cp',   templateUrl: '...',   styleUrls: ['...'] }) export class MyComponent implements OnInit {    constructor(private elementRef: ElementRef) {     //stuffs   }    ngAfterViewInit() {     // things   }    ngOnInit() {   } } 

and the test:

import {   beforeEach,   beforeEachProviders,   describe,   expect,   it,   inject, } from '@angular/core/testing'; import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { Component, Renderer, ElementRef } from '@angular/core'; import { By } from '@angular/platform-browser';  describe('Component: My', () => {   let builder: TestComponentBuilder;    beforeEachProviders(() => [MyComponent]);   beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {     builder = tcb;   }));    it('should inject the component', inject([MyComponent],       (component: MyComponent) => {     expect(component).toBeTruthy();   }));    it('should create the component', inject([], () => {     return builder.createAsync(MyComponentTestController)       .then((fixture: ComponentFixture<any>) => {         let query = fixture.debugElement.query(By.directive(MyComponent));         expect(query).toBeTruthy();         expect(query.componentInstance).toBeTruthy();       });   })); });  @Component({   selector: 'test',   template: `     <cp></cp>   `,   directives: [MyComponent] }) class MyTestController { } 

Both the component and the test blueprint have been generated by Angular-cli. Now, I can't figure out which provider, if any, I should add in the beforeEachProviders for the injection of ElementRef to be successful. When I run ng test I got Error: No provider for ElementRef! (MyComponent -> ElementRef).

Answer 1

I encounter Can't resolve all parameters for ElementRef: (?) Error using the mock from @gilad-s in angular 2.4

Modified the mock class to:

export class MockElementRef extends ElementRef {   constructor() { super(null); } } 

resolves the test error.

Reading from the angular source code here: https://github.com/angular/angular/blob/master/packages/core/testing/src/component_fixture.ts#L17-L60 the elementRef of the fixture is not created from the mock injection. And in normal development, we do not explicitly provide ElementRef when injecting to a component. I think TestBed should allow the same behaviour.

Answer 2

On Angular 2.2.3:

export class MockElementRef extends ElementRef {} 

Then in the test:

beforeEach(async(() => {   TestBed.configureTestingModule({     providers: [       //more providers       { provide: ElementRef, useClass: MockElementRef }     ]   }).compileComponents(); }));