无法在玩笑中模拟Renderer2

Question

试图在Jest环境中模拟Renderer2，但无法使其正常工作。 Jest 23＆Angular7。尝试了Everythig的用法：

• https://github.com/angular/angular/issues/15341
• Make the component test to have a body or mock Renderer2

component.ts

const icosahedron = document.getElementById('renderIcosahedron');
this.renderer2.appendChild(icosahedron, this.renderer.domElement);

一直获取错误（仅在测试中：）

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

编辑：更详细的说明已添加到Angular的回购中，但是被拒绝为bug。链接：https://github.com/angular/angular/issues/30865#issue-452458779

Answer 1

代替从TestBed中创建组件对象，您可以将组件构造函数称为，

const renderer2 = { setStyle: () => {}, removeStyle: () => {} } as any;
    const myComponent: MyComponent= new MyComponent(
      {} as ChangeDetectorRef,
      renderer2 as Renderer2,
      {} as NgZone
    );

    const setStyleSpy = jest.spyOn(renderer2, "setStyle");

让我们说，如果应该在异步调用中调用renderer2逻辑，我们可以模拟该异步调用函数并测试在发生异步操作时是否调用了该函数。然后可以将该函数作为其他规范的一部分单独调用并测试渲染逻辑。