Angular Karma Jasmine测试报错：Cannot read properties of undefined (reading 'controls')

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'controls')，核心问题是测试时组件的rootForm实例未被初始化。组件里的表单通常是在ngOnInit或构造函数中通过FormBuilder或new FormGroup创建的，但测试代码中直接访问rootForm.controls时，这个表单实例还不存在，自然会报错。另外你原测试代码里的component变量未赋值，也会导致后续调用component.loadData()失败。

修复步骤 #

方案1：触发组件生命周期钩子初始化表单 #

如果你的组件是在ngOnInit中创建的表单（比如用FormBuilder），只需在测试中调用fixture.detectChanges()触发钩子，让表单完成初始化：

it('load data ',() =>{
  const fixture = TestBed.createComponent(ImportantMattersComponent);
  const component = fixture.componentInstance;
  // 触发ngOnInit，初始化rootForm
  fixture.detectChanges();
  
  component.rootForm.controls.name.setValue('name');
  component.rootForm.controls.address.setValue('address');
  component.loadData();
  
  // 可添加断言验证结果
  expect(component.signatureflag).toBe(true);
});

方案2：手动初始化表单（不依赖生命周期） #

如果不想依赖组件的生命周期钩子，也可以在测试中手动创建FormGroup实例赋值给rootForm：

import { FormGroup, FormControl } from '@angular/forms';

it('load data ',() =>{
  const fixture = TestBed.createComponent(ImportantMattersComponent);
  const component = fixture.componentInstance;
  
  // 手动创建表单实例
  component.rootForm = new FormGroup({
    name: new FormControl(''),
    address: new FormControl('')
  });
  
  component.rootForm.controls.name.setValue('name');
  component.rootForm.controls.address.setValue('address');
  component.loadData();
  
  expect(component.signatureflag).toBe(true);
});

额外注意点 #

• 确保测试代码中正确获取组件实例：原测试里的component变量未定义，必须通过fixture.componentInstance赋值后才能使用。
• 若组件依赖FormBuilder，需在TestBed配置中添加providers: [FormBuilder]，避免依赖注入报错。

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