Angular v15 Jest快照测试报错：Cannot read properties of undefined

核心原因 #

快照测试时组件模板渲染时机早于表单实例初始化完成，导致模板中访问form.value或关联控件值时触发undefined错误。运行时页面正常是因为浏览器渲染流程与测试环境的异步初始化逻辑存在差异。

排查方向 #

• 核对TestBed配置：确认是否导入ReactiveFormsModule/FormsModule，若组件依赖外部表单实例，测试时需手动传入模拟对象
• 检查组件初始化逻辑：确保表单实例（如this.form = this.fb.group(...)）在ngOnInit/构造函数中同步完成，而非异步延迟创建
• 排查模板绑定：即使组件代码中移除了this.form.value，模板里可能仍有{{ form.value.someField }}这类直接绑定，这是高频遗漏点

具体解决方法 #

1. 提前初始化测试用表单实例 #

在测试的beforeEach中手动创建表单并关联到组件，确保模板渲染时表单已存在：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ReactiveFormsModule],
    declarations: [YourTargetComponent],
  }).compileComponents();

  fixture = TestBed.createComponent(YourTargetComponent);
  component = fixture.componentInstance;
  // 手动初始化组件内部表单
  component.form = component.fb.group({
    username: ['test-user'],
    email: ['test@example.com']
  });
  fixture.detectChanges(); // 触发模板更新
});

2. 用安全导航符保护模板绑定 #

在模板中对所有表单相关的访问添加?.操作符，避免undefined访问：

<!-- 原模板代码 -->
<p>当前值：{{ form.value.username }}</p>
<form [formGroup]="form">
  <input formControlName="username">
</form>

<!-- 修改后 -->
<p>当前值：{{ form?.value?.username }}</p>
<form *ngIf="form" [formGroup]="form">
  <input formControlName="username">
</form>

3. 异步场景下等待表单初始化完成 #

如果表单是通过服务异步加载配置后创建的，用fakeAsync和tick等待异步操作结束：

it('should generate correct snapshot', fakeAsync(() => {
  // 模拟服务返回表单配置
  spyOn(component.formConfigService, 'fetchConfig').and.returnValue(of(mockFormConfig));
  
  fixture.detectChanges(); // 触发组件初始化
  tick(); // 等待异步请求完成
  fixture.detectChanges(); // 重新渲染模板
  
  expect(fixture.nativeElement).toMatchSnapshot();
}));

4. 显式传入输入型表单实例 #

若表单是通过@Input()从父组件传入的，测试时必须主动赋值：

beforeEach(() => {
  // ... 其他TestBed配置
  // 传入模拟表单实例
  component.parentForm = new FormGroup({
    password: new FormControl('')
  });
  fixture.detectChanges();
});

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