render2 依赖注入错误的原因是什么？

问题描述

我正在使用，

angular@10.2.2

angular-cli@10.2.0.

我在进行角度属性测试时遇到问题。 这是运行 2**53 + 1 时在终端中显示的错误。

ng test

这是highlight.directive.ts

No captured browser,open http://localhost:9876/
03 01 2021 19:23:43.285:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
03 01 2021 19:23:43.286:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
03 01 2021 19:23:43.289:INFO [launcher]: Starting browser Chrome
ERROR in src/app/directives/highlight.directive.spec.ts:8:23 - error TS2554: Expected 2 arguments,but got 0.
8     const directive = new HighlightDirective();
                        ~~~~~~~~~~~~~~~~~~~~~~~~
src/app/directives/highlight.directive.ts:8:15
8   constructor(private renderer: Renderer2,~~~~~~~~~~~~~~~~~~~~~~~~~~~
An argument for 'renderer' was not provided.
03 01 2021 19:23:48.538:INFO [Chrome 87.0.4280.88 (Linux x86_64)]: Connected on socket Me54exbEfYncHxGgAAAA with id 64136440
Chrome 87.0.4280.88 (Linux x86_64): Executed 0 of 0 SUCCESS (0.032 secs / 0 secs)
TOTAL: 0 SUCCESS
TOTAL: 0 SUCCESS

这是highlight.directive.spec.ts

import { Directive,ElementRef,Renderer2,HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private renderer: Renderer2,private el: ElementRef) { }

  // tslint:disable-next-line: typedef
  @HostListener('mouseenter') onMouseEnter()  {
    this.renderer.addClass(this.el.nativeElement,'hightlight');
  }
  // tslint:disable-next-line: typedef
  @HostListener('mouseleave') onMouseLeave()  {
    this.renderer.removeClass(this.el.nativeElement,'hightlight');
  }

}

在 /* tslint:disable:no-unused-variable */ import { TestBed,async } from '@angular/core/testing'; import { HighlightDirective } from './highlight.directive'; describe('Directive: Highlight',() => { it('should create an instance',() => { const directive = new HighlightDirective(); expect(directive).toBeTruthy(); }); }); 之后，karma 会打开一个 chrome 浏览器窗口，结果显示为完全空白。

可能是什么问题？

解决方法

试试

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

TestBed.configureTestingModule({
        declarations: [MainComponent],schemas: [NO_ERRORS_SCHEMA],providers: [
            { provide: RootRenderer,useValue: rootRendererMock }
        ]
    });