无法在 Jest 中模拟 Renderer2答案

【问题标题】：Can't mock Renderer2 in Jest无法在 Jest 中模拟 Renderer2
【发布时间】：2019-10-19 02:49:34
【问题描述】：

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

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 的 repo 中添加了更详细的解释，但它作为一个错误被拒绝了。链接：https://github.com/angular/angular/issues/30865#issue-452458779

【问题讨论】：

你有没有解决这个问题。如果是，请分享。
@siddiqrehman 我很乐意，但不幸的是没有。
为了变通，我没有使用TestBed创建组件，而是使用模拟渲染器2调用组件的构造函数并测试渲染器2逻辑。
@siddiqrehman 你能分享你的代码吗？

标签： angular unit-testing jestjs tdd bdd

【解决方案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 逻辑，我们可以模拟该异步调用函数并测试发生异步操作时是否调用了该函数。然后该函数可以作为其他规范的一部分单独调用并测试渲染逻辑。

【讨论】：