无法在 Jest 中模拟 Renderer2

Question

尝试在 Jest 环境中模拟 Renderer2，但无法使其工作。Jest 23 和 Angular 7。尝试了以下所有内容：

• https://github.com/angular/angular/issues/15341
• 使组件测试具有主体或模拟 Renderer2

组件.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 的存储库中，但它被视为错误而被拒绝。链接：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 逻辑，我们可以模拟该异步调用函数并测试当异步操作发生时该函数是否被调用。然后该函数可以作为其他规范的一部分单独调用并测试渲染逻辑。