Angular 4：测试调用@ViewChild组件方法的函数

我来一步步教你完成这个测试用例，核心是验证getFirstLocation方法是否正确调用了子组件MapComponent的getLocation方法。我们会采用单元测试隔离原则，优先使用Mock子组件来避免依赖真实组件的复杂逻辑。

步骤1：完善TestBed配置并创建Mock子组件 #

单元测试中，我们不需要依赖真实的MapComponent，而是创建一个模拟组件来替代它，这样可以专注测试当前组件的逻辑：

首先在.spec文件顶部定义模拟组件：

import { Component } from '@angular/core';
import { MapComponent } from './path-to-map-component'; // 引入真实组件的类型（可选）

@Component({
  selector: 'app-map', // 必须与真实MapComponent的selector完全一致
  template: '' // 空模板即可满足测试需求
})
class MockMapComponent {
  // 使用Jasmine创建spy来跟踪方法调用（如果用Jest则替换为`jest.fn()`）
  getLocation = jasmine.createSpy('getLocation');
}

然后完善TestBed的配置片段：

beforeEach(async(() => { 
  TestBed.configureTestingModule({ 
    imports: [ ReactiveFormsModule, FormsModule, BrowserAnimationsModule ], 
    declarations: [
      CreateGroupComponent,
      MockMapComponent // 替换真实的MapComponent为模拟组件
    ]
  }).compileComponents(); 
}));

步骤2：初始化测试环境 #

在beforeEach中获取组件实例和模拟子组件的引用：

import { ComponentFixture, TestBed, By } from '@angular/core/testing';
// ...其他必要的导入

let fixture: ComponentFixture<CreateGroupComponent>;
let component: CreateGroupComponent;
let mockMapComponent: MockMapComponent;

beforeEach(() => {
  fixture = TestBed.createComponent(CreateGroupComponent);
  component = fixture.componentInstance;
  
  // 获取模拟的MapComponent实例
  mockMapComponent = fixture.debugElement.query(By.directive(MockMapComponent)).componentInstance;
  
  fixture.detectChanges(); // 触发初始数据绑定
});

步骤3：编写核心测试用例 #

验证getFirstLocation方法调用时，是否正确触发了子组件的getLocation方法：

it('调用getFirstLocation时应该触发MapComponent的getLocation方法', () => {
  // 执行测试方法（传入任意占位参数即可）
  component.getFirstLocation(null);
  
  // 断言：验证spy被调用过
  expect(mockMapComponent.getLocation).toHaveBeenCalled();
  
  // 可选：验证调用次数或参数
  // expect(mockMapComponent.getLocation).toHaveBeenCalledTimes(1);
});

补充说明（集成测试场景） #

如果确实需要使用真实的MapComponent（比如做集成测试），只需将declarations中的MockMapComponent替换为真实的MapComponent即可，但要注意处理真实组件的依赖（如服务、模板资源等），这种方式更适合集成测试而非单元测试。

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