Angular测试FormBuilder报Cannot read property 'form' of undefined如何解决

• 核心直接原因：测试代码中仅声明了accountComponent变量，没有在组件编译完成后对其进行实例化赋值，该变量始终为undefined，访问undefined.form自然触发对应报错
• TestBed配置错误：imports数组只能放置Angular模块类，你错误将FormBuilder、CustomValidationService、UserService这些服务类放入了imports；同时响应式表单依赖的ReactiveFormsModule没有被导入，仅导入了模板驱动表单对应的FormsModule
• 测试用例缺少初始化触发：即使实例化了组件，也需要调用fixture.detectChanges()触发首次变更检测，确保组件构造函数、生命周期钩子正常执行完成，form属性才会被正确赋值

按以下步骤修改你的spec.ts测试文件即可：

1. 导入响应式表单所需的ReactiveFormsModule
2. 修正TestBed配置，将服务类移到providers数组，imports只放模块
3. 在beforeEach中完成组件实例化赋值
4. 为测试用例添加合法描述，避免测试报告异常

修复后的完整测试代码如下：

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { CustomValidationService } from 'src/app/core/services/custom-validation/custom-validation.service';
import { UserService } from 'src/app/core/services/user/user.service';
import { AccountComponent } from './account.component';

describe('AccountComponent', () => {
  let accountComponent: AccountComponent;
  let fixture: ComponentFixture<AccountComponent>;
  
  beforeEach(async(() => {
    // 外部服务建议用Mock对象替代真实实现，避免单元测试依赖外部逻辑
    const mockCustomValidator = jasmine.createSpyObj('CustomValidationService', ['你组件中用到的服务方法名']);
    const mockUserService = jasmine.createSpyObj('UserService', ['你组件中用到的服务方法名']);

    TestBed.configureTestingModule({
      declarations: [AccountComponent],
      // imports只放模块
      imports: [ReactiveFormsModule],
      // 服务全部放providers
      providers:[
        FormBuilder,
        { provide: CustomValidationService, useValue: mockCustomValidator },
        { provide: UserService, useValue: mockUserService }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();

    // 实例化组件
    fixture = TestBed.createComponent(AccountComponent);
    accountComponent = fixture.componentInstance;
    // 触发首次变更检测，完成组件初始化
    fixture.detectChanges();
  }))
 
  it('should set username form control value correctly', fakeAsync(()=>{
    const testForm={
      username:'test',
      email: 'test@example.com'
    };
    accountComponent.form.controls['username'].setValue(testForm.username);
    // 可加断言验证结果
    expect(accountComponent.form.controls['username'].value).toBe(testForm.username);
  }))
});

如果你组件内确实用到了模板驱动表单的相关逻辑，可以在imports中额外添加FormsModule即可。

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