Angular响应式表单测试报Can't read property 'controls' from undefined如何解决

报错根本原因 #

你在访问personalComponent.form.controls时，personalComponent.form尚未完成初始化，处于undefined状态，无法读取其下的controls属性。 #

常见问题场景及修复方案 #

• 测试未触发组件初始化流程
  多数情况下表单初始化逻辑写在组件ngOnInit生命周期钩子中，测试用例执行前如果没有触发组件初始化，form就不会被赋值。修复方法：在访问form属性前，先执行fixture.detectChanges()触发ngOnInit执行，完成表单初始化。
• 依赖服务注入及数据缺失
  你的表单初始化依赖userService的嵌套属性，若测试模块中未正确注入userService，或是userService.User、userService.User.profile.personal这类嵌套属性为undefined，会导致表单初始化抛出异常，最终form赋值失败。修复方法：在测试模块中配置userService的mock数据，确保所有用到的嵌套属性都有默认值，参考配置：

  const mockUserService = {
    User: {
      teste: '',
      profile: {
        personal: {
          teste: ''
        }
      }
    }
  };
  
  // TestBed 配置中添加 provider
  TestBed.configureTestingModule({
    declarations: [PersonalComponent],
    providers: [
      { provide: UserService, useValue: mockUserService }
    ]
  })
  

• 组件实例获取错误
  检查测试代码中是否通过fixture.componentInstance正确获取到personalComponent实例，避免使用未赋值的空变量访问form属性。

其他注意事项 #

你当前示例代码中存在两个潜在问题，调试时可同步修复：

1. 表单定义中所有控件都使用了相同的teste命名，后面的控件会覆盖前面的同名控件，实际使用时需要修改为唯一的控件名
2. 测试用例中重复声明let teste变量，会触发变量重定义报错，需要对应修改为不同的变量名，或是直接通过控件路径赋值

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