Angular独立父组件测试：如何Mock子组件替代原组件？

问题根源 #

你的AppComponent作为独立组件，已在自身imports数组中直接引入TableComponent。测试时直接导入AppComponent，Angular会优先使用组件自身声明的依赖，导致Mock组件无法替换原组件。

正确解决方案 #

在测试模块中使用TestBed.overrideComponent方法，覆盖AppComponent的imports配置，将原TableComponent替换为Mock组件。

完整修正后的测试代码 #

先定义Mock组件，再通过覆盖配置替换依赖：

// 定义Mock Table组件
@Component({
  selector: 'app-table',
  template: '<h2>Hi</h2>',
  standalone: true
})
class MockTableComponent {}

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent] // 仅导入父组件
    })
    // 关键步骤：覆盖父组件的imports，替换原组件为Mock
    .overrideComponent(AppComponent, {
      remove: { imports: [TableComponent] },
      add: { imports: [MockTableComponent] }
    })
    .compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render the mock table', () => {
    // 验证Mock组件渲染结果
    const mockTable = fixture.debugElement.query(By.css('h2'));
    expect(mockTable.nativeElement.textContent).toBe('Hi');
    
    // 验证原组件未被渲染
    const originalTable = fixture.debugElement.query(By.css('h1'));
    expect(originalTable).toBeNull();
  });
});

额外注意事项 #

• 测试代码中的LanesComponent是笔误，需修正为AppComponent
• 无需在测试模块的imports中导入Mock组件，通过overrideComponent注入即可
• 若需给Mock组件添加模拟方法或属性，直接在MockTableComponent中定义即可

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