Angular组件单元测试报错：Cannot read properties of undefined (reading 'username')

问题根源 #

报错是因为组件初始化阶段，接收用户详情的BehaviorSubject无初始值，导致模板直接访问user.username时，user为undefined触发属性读取错误；同时默认测试用例未模拟BehaviorSubject的数据流，组件无法获取用户数据。

解决方案 #

1. 模板层面做空值保护 #

在HTML模板中通过安全导航操作符或*ngIf避免访问undefined属性：

修改前（示例）：

<input type="text" [(ngModel)]="user.username" formControlName="username">

修改后二选一：

<!-- 方式1：安全导航符 -->
<input type="text" [(ngModel)]="user?.username" formControlName="username">

<!-- 方式2：ngIf包裹，确保user存在再渲染 -->
<div *ngIf="user">
  <input type="text" [(ngModel)]="user.username" formControlName="username">
</div>

2. 组件中给BehaviorSubject设置初始值 #

在组件TS代码里，初始化BehaviorSubject时传入默认用户对象，避免初始状态为undefined：

// 示例：定义带初始值的BehaviorSubject
userSubject = new BehaviorSubject<User>({ username: '', id: 0 });
user$ = this.userSubject.asObservable();

// 或在订阅时做空值兜底
ngOnInit() {
  this.dashboardService.user$.subscribe(user => {
    this.user = user || { username: '', id: 0 };
    this.userForm.patchValue(this.user);
  });
}

3. 测试用例中模拟BehaviorSubject数据流 #

在Spec文件里，组件初始化前模拟发送用户数据，确保组件能获取到user对象：

场景1：依赖服务提供BehaviorSubject

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { of } from 'rxjs';
import { UserEditComponent } from './user-edit.component';
import { DashboardService } from '../dashboard/dashboard.service';

describe('UserEditComponent', () => {
  let component: UserEditComponent;
  let fixture: ComponentFixture<UserEditComponent>;
  let mockDashboardService: jasmine.SpyObj<DashboardService>;

  beforeEach(async () => {
    mockDashboardService = jasmine.createSpyObj('DashboardService', [], {
      user$: of({ username: 'testUser', id: 1 })
    });

    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [UserEditComponent],
      providers: [{ provide: DashboardService, useValue: mockDashboardService }]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(UserEditComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

场景2：通过@Input()接收BehaviorSubject

beforeEach(() => {
  fixture = TestBed.createComponent(UserEditComponent);
  component = fixture.componentInstance;
  // 给输入属性赋值并发送模拟数据
  component.userSubject = new BehaviorSubject({ username: 'testUser', id: 1 });
  fixture.detectChanges();
});

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