Angular 2测试 - 渲染器未定义

组件定义：

export class NoteComponent  {
    constructor(elementRef: ElementRef,
        renderer: Renderer,
        _alertService: AlertService) {
    }

    ngAfterViewInit() {

        //Hiding the toolbar when editable by default.
        this.renderer.setElementStyle(this.elementRef.nativeElement.children[0].children[2].children[0], 'display', 'none');
    }
}

测试

describe('NoteComponent (external template)', () => {
    let comp: NoteComponent;
    let fixture: ComponentFixture<NoteComponent>;
    let de: DebugElement;
    let el: HTMLElement;

    let rendererMock = jasmine.createSpyObj('rendererMock', ['selectRootElement',
        'createElement',
        'createViewRoot',
        'createText',
        'setElementProperty',
        'setElementAttribute',
        'setText',
        'setBindingDebugInfo',
        'createTemplateAnchor',
        'projectNodes',
        'attachViewAfter',
        'detachView',
        'destroyView',
        'listen',
        'listenGlobal',
        'setElementClass',
        'setElementStyle',
        'invokeElementMethod',
        'animate']);

    let rootRendererMock = {
        renderComponent: () => {
            return rendererMock;
        }
    };

    beforeEach(async () => {
        TestBed.configureTestingModule({
            declarations: [
                NoteComponent,
                SafePipe], // declare the test component
            providers: [AlertService,
                { provide: Renderer, useValue: rootRendererMock }]
        })
            .overrideComponent(NoteComponent, {
                set: {
                    providers: [
                        { provide: Renderer, useValue: rootRendererMock }
                    ]
                }
            });

        TestBed.compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(NoteComponent);
        comp = fixture.componentInstance;
     });
     
     it('note: note not on favorite page, not faved', async () => {
        comp.pinnedOnFavWall = false;
        fixture.detectChanges();
        de = fixture.debugElement.query(By.css('.favorite'));
        expect(de).toBeDefined();
    });

测试通过，因为它是异步的，但我在控制台中收到此错误：

TypeError：无法读取DomRenderer.webpackJsonp中未定义的属性'style'... / .. / .. / platform-browser / src / dom / dom_renderer.js.DomRenderer.setElementStyle（http：// localhost：9876 / karma_webpack /webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/platform-browser/src/dom/dom_renderer.js:395:1）在DebugDomRenderer.webpackJsonp ... / .. / .. / core / src / debug / debug_renderer.js.DebugDomRenderer.setElementStyle（http：// localhost：9876 / karma_webpack / webpack：/ C：/ Shilpa / Work / Freelancing / ArugamBay / Code / ArugambaySite2 /src/Arugambay.Web/~/@angular/core/src/debug/debug_renderer.js：223：1）在NoteComponent.ngAfterViewInit（http：// localhost：9876 / karma_webpack / webpack：/ C：/ Shilpa / CompiledTemplate.proxyViewClass.View_NoteComponent_Host0.detectChangesInternal（/ DynamicTestModule / NoteComponent /）中的Work / Freelancing / ArugamBay / Code / ArugambaySite2 / src / Arugambay.Web / Scripts / app / components / controls / Note / note.component.ts:67:23） host.ngfactory.js：32：72）在CompiledTempl ate.proxyViewClass.webpackJsonp ... / .. / .. / core / src / linker / view.js.AppView.detectChanges（http：// localhost：9876 / karma_webpack / webpack：/ C：/ Shilpa / Work / Freelancing /ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/angular/core/src/linker/view.js:425：1）在CompiledTemplate.proxyViewClass.webpackJsonp ... / .. / .. / core / src / linker / view.js.DebugAppView.detectChanges（http：// localhost：9876 / karma_webpack / webpack：/ C：/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular /core/src/linker/view.js:620:1）在ViewRef_.webpackJsonp ... / .. / .. / core / src / linker / view_ref.js.ViewRef_.detectChanges（http：// localhost：9876）在ComponentFixture._tick的/karma_webpack/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/angular/core/src/linker/view_ref.js:181:1） （HTTP：//本地主机：9876 / karma_webpack /的WebPack：/ C：/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/bundles/core-testing.umd . js：191：1）在http：// localhost：9在ZoneDelegate的876 / karma_webpack / webpack：/ C：/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/angular/core/bundles/core-testing.umd.js:205:46 .invoke（http：// localhost：9876 / base / node_modules / zone.js / dist / zone.js：365：26）在ProxyZoneSpec.webpackJsonp ... / .. / .. / .. / zone.js / dist / proxy.js.ProxyZoneSpec.onInvoke（http：// localhost：9876 / karma_webpack / webpack：/ C：/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/zone.js/在Object.onInvoke（http：// localhost：9876 / karma_webpack / webpack：/ C：/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/angular/core/src/zone/ng_zone.js：271：1）at Zone.run上的ZoneDelegate.invoke（http：// localhost：9876 / base / node_modules / zone.js / dist / zone.js：364：32）（http：// localhost：9876 / base / node_modules / zone.js） /dist/zone.js:125:43）

我该如何摆脱这个错误？即使没有模拟，我也会得到同样的错误 .

PS：为简洁起见，编辑了组件代码 . 因此，堆栈中的行号可能不匹配 .