Angular4:MockElementRef

我正在试图弄清楚如何模拟ElementRef注入组件的东西.我的组件如下:

app.component.ts:

import { Component, ElementRef } from '@angular/core';

import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app/app.component.html',
  styleUrls: ['./app/app.component.css']
})
export class AppComponent {
  title = 'app works!';

  constructor(private _elementRef: ElementRef, private _appService: AppService) {
    console.log(this._elementRef);
    console.log(this._appService);
  }
}

我的测试规范如下:

app.component.spec.ts:

import { TestBed, async } from '@angular/core/testing';
import { ElementRef, Injectable } from '@angular/core';
import { AppComponent } from './app.component';
import { AppService } from './app.service';

@Injectable()
export class MockElementRef {
  nativeElement: {}  
}

@Injectable()
export class MockAppService {

}

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers: [
        {provide: ElementRef, useClass: MockElementRef},
        {provide: AppService, useClass: MockAppService}
      ]
    }).compileComponents();
  }));

  ...
});

运行测试时console.log,构造函数中的输出app.component.ts是:

正如你所看到的,它注入了MockAppService但不是注入MockElementRef(尽管它们都以相同的方式被嘲笑).

这个SO帖子暗示你可以像任何其他模拟那样设置它,但是我注意到这是针对Angular 2的 - 所以我想知道Angular 4中是否有变化？

可以在此处找到具有上述代码和Jasmine测试的Plunker .运行Plunker然后单击"Run Unit Tests"链接以启动单元测试.可以在开发人员工具/ Firebug中观察控制台输出.