Angular单元测试中如何Mock外部包组件的ViewChild元素

@ViewChild查询返回undefined通常是两个原因导致：

• 测试模块未导入Angular Material对应依赖，模板中的mat-chip-list、matAutocompleteTrigger等指令/组件未被Angular编译器识别，模板变量无法绑定到对应实例
• 未执行fixture.detectChanges()触发视图渲染就尝试访问ViewChild属性，Angular只有在变更检测流程中才会完成视图子节点的查询赋值

你可以根据测试场景二选一：

方案1：导入真实Material依赖（优先推荐） #

这个方案完全还原组件真实运行环境，不需要额外写mock逻辑，适合大部分集成度稍高的单元测试。
首先在测试模块的imports数组中加入必须的依赖：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatChipsModule } from '@angular/material/chips';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { YourComponent } from './your.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [
        BrowserAnimationsModule, // Material组件动画依赖，缺失会抛错
        MatFormFieldModule,
        MatInputModule,
        MatChipsModule,
        MatAutocompleteModule
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 这行执行后才会完成视图渲染和ViewChild绑定
    fixture.detectChanges();
  });

  // 测试用例写在这里，此时访问component.chipList等属性已经是真实实例
});

注意：如果你的@ViewChild配置了{ static: true }，绑定会在ngOnInit生命周期前完成，必须保证导入的依赖正确，否则在ngOnInit中访问属性依然是undefined。

方案2：手动Mock ViewChild实例 #

如果你不想引入全量Material依赖做轻量单元测试，可以直接给组件类的ViewChild属性手动赋值mock对象——@ViewChild装饰的属性本质就是组件实例上的普通属性，直接赋值即可覆盖。
mock对象不需要实现完整的类接口，只需要覆盖你业务逻辑中实际调用到的属性、方法即可：

beforeEach(() => {
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;

  // 按业务实际用到的方法/属性构造mock即可
  component.chipList = jasmine.createSpyObj(
    'MatChipList', 
    ['removeChip', 'selectChip'] // 替换为你代码里实际调用的chipList方法
  );
  component.autocompleteChipInput = {
    nativeElement: jasmine.createSpyObj(
      'InputElement',
      ['focus', 'blur'], // 替换为实际调用的input方法
      { value: '' } // 替换为实际用到的input属性
    )
  } as ElementRef<HTMLInputElement>;
  component.autocompleteTrigger = jasmine.createSpyObj(
    'MatAutocompleteTrigger',
    ['openPanel', 'closePanel'], // 替换为实际调用的自动补全触发器方法
    { panelOpen: false } // 替换为实际用到的触发器属性
  );

  // 赋值完mock再触发变更检测，执行后续测试逻辑
  fixture.detectChanges();
});

注意：如果你的ViewChild配置了{ static: true }，需要把mock赋值逻辑移到第一次fixture.detectChanges()之前，否则ngOnInit生命周期执行时访问到的还是undefined。

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