无法在Jest中模拟Renderer2

Question

尝试在Jest环境中模拟Renderer2，但无法使其正常工作。使用的是Jest 23和Angular 7。已经尝试了从以下链接中找到的所有内容：

• 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的存储库中已添加了更详细的说明，但被拒绝作为错误。链接：https://github.com/angular/angular/issues/30865#issue-452458779

- Daniel Danielecki

---

你解决了这个问题吗？如果是，请分享一下。 - siddiq rehman

很抱歉，我想参与，但实在是不行。 - Daniel Danielecki

为了解决问题，我没有使用TestBed创建组件，而是使用模拟的renderer2调用了组件的构造函数，并测试了renderer2的逻辑。 - siddiq rehman

@siddiqrehman，你能分享一下你的代码吗？ - Daniel Danielecki

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逻辑应该在异步调用中被调用，我们可以模拟这个异步调用函数，并测试当异步操作发生时是否调用了该函数。然后该函数可以作为其他规格的一部分单独调用以测试渲染逻辑。

- siddiq rehman