Angular 14+Jest：如何Mock父组件测试子组件？

你的问题出在子组件通过构造器直接注入了父组件实例，实际业务中父组件作为宿主包裹子组件时，Angular会自动完成这个注入，但单独测试子组件时，没有父组件的上下文环境，所以需要手动Mock父组件并提供依赖。

解决步骤 #

1. 定义Mock父组件

只需要模拟子组件用到的方法即可，不用实现父组件的全部逻辑：

class MockParentComponent {
  // 用Jest的mock函数跟踪方法调用
  onChildClicked = jest.fn();
}

2. 修改测试代码，提供Mock父组件依赖

在render函数的配置中，通过providers项替换真实的ParentComponent为Mock类：

describe("ChildComponent", () => {
  it("should render successfully", async () => {
    const { container } = await render(ChildComponent, {
      providers: [
        { provide: ParentComponent, useClass: MockParentComponent }
      ]
    });
    expect(container).toBeTruthy();
  });

  // 额外测试点击交互逻辑
  it("should trigger parent's onChildClicked when clicked", async () => {
    // 创建Mock实例，方便跟踪调用
    const mockParent = new MockParentComponent();
    const { getByRole } = await render(ChildComponent, {
      providers: [
        { provide: ParentComponent, useValue: mockParent }
      ]
    });

    // 模拟点击子组件（根据实际DOM结构调整选择器）
    getByRole('button').click();

    // 验证父组件方法被正确调用
    expect(mockParent.onChildClicked).toHaveBeenCalledTimes(1);
    expect(mockParent.onChildClicked).toHaveBeenCalledWith(expect.any(ChildComponent));
  });
});

为什么之前的代码报错？ #

原来的测试中仅声明了ParentComponent，但Angular无法自动创建父组件的实例（因为父组件不是常规服务，而是作为宿主组件的上下文存在）。通过providers配置Mock父组件的实例，才能满足子组件的依赖注入需求。

额外注意事项 #

• Mock父组件只需实现子组件实际用到的属性/方法，无需完整复刻原组件
• 使用Jest的jest.fn()可以轻松跟踪方法的调用次数、参数等，验证交互逻辑
• 如果父组件有@Input或@Output，可以在Mock类中添加对应的属性模拟

内容的提问来源于stack exchange，提问作者Doug