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).

this remains a stickler in angular testing even in 9.1.2 – roberto tomás Apr 21 '20 at 22:44 — roberto tomás, Apr 21 '20 at 22:44

score 33 · Answer 1 · edited Aug 30 '18 at 17:35

33

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.

edited Aug 30 '18 at 17:35

shohrukh

2,989
3
23
38

answered Mar 07 '17 at 06:27

Northern

2,338
1
17
20

1

If you're calling -- say, `ref.nativeElement.remove()` -- in the component, I'd recommend using something like `new MockElementRef( document.createElement('div') )`. – Cody Aug 27 '20 at 20:55

score 25 · Accepted Answer · answered Dec 25 '16 at 11:58

25

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

answered Dec 25 '16 at 11:58

Gilad S

1,753
1
13
14

4

Using Angular 5 I also needed to add the property `nativeElement` to the `MockElementRef`: `class MockElementRef extends ElementRef { nativeElement = {}; }` – magikMaker Mar 07 '18 at 16:03
Does not work with components in the component under test. The component under test has a template with other components which have a directive which uses Host ElementRef. I searched the web for a solution, but nothing helped. Error: `No provider for ElementRef` Directive: `constructor(@Host() host: ElementRef)` (Angular 5) – Domske Nov 05 '19 at 13:16

Mathieu Nls · Answer 3 · 2016-09-21T10:39:06.060

12

To inject an ElementRef:

Create a mock

class MockElementRef implements ElementRef {
  nativeElement = {};
}

Provide the mock to the component under test

beforeEachProviders(() => [Component, provide(ElementRef, { useValue: new MockElementRef() })]);

EDIT: This was working on rc4. Final release introduced breaking changes and invalidates this answer.

edited Sep 21 '16 at 10:39

answered Jul 28 '16 at 21:39

Mathieu Nls

2,285
2
17
32

1

This will no longer work in Angular2 final, because oft breaking changes. – Christian Kuetbach Sep 21 '16 at 10:15
Indeed. I am updating the answer. – Mathieu Nls Sep 21 '16 at 10:38
in order to be AoT compliant, should be provided with `{provide: ElementRef, useFactory: mockElementFactory}` where `mockElementFactory` is an exported function returning `new MockElementRef()`. – Burak Tasci Sep 14 '17 at 00:53

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

1

A good way is to use spyOn and spyOnProperty to instant mock the methods and properties as needed. spyOnProperty expects 3 properties and you need to pass get or set as third property. spyOn works with class and method and returns required value.

Example

const div = fixture.debugElement.query(By.css('.ellipsis-overflow'));
// now mock properties
spyOnProperty(div.nativeElement, 'clientWidth', 'get').and.returnValue(1400);
spyOnProperty(div.nativeElement, 'scrollWidth', 'get').and.returnValue(2400);

Here I am setting the get of clientWidth of div.nativeElement object.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 18 '17 at 19:55

Aniruddha Das

20,520
23
96
132

Not working on Angular 8.2. Mocked values are not returned. – Alejandro Sanz Díaz Dec 19 '19 at 14:18

score 1 · Answer 5 · answered Apr 05 '22 at 19:54

It started showing up after I did a package update in my Angular project.

I tried all the solutions above and none of them worked for me. The problem occurred when I ran the npm run test command.

I managed to solve by updating all jest dependencies. In this case, the dependencies I updated were @briebug/jest-schematic, @types/jest, jest-preset-angular and jest

Angular2 Inject ElementRef in unit test

5 Answers5

Example

Linked