Angular组件Jasmine测试报Cannot read properties of undefined (reading '_value')问题问询

你遇到的TypeError: Cannot read properties of undefined (reading '_value')错误由3个核心问题共同导致：

• 你创建的DataSharingService spy对象的getSystemUser方法未预设返回值，组件构造函数调用该方法时返回undefined，后续访问res.source._value自然报错
• TestBed的providers配置语法错误，且你定义的dataSharing spy对象没有被正确注入到测试模块中
• 第二个beforeEach里的执行顺序错误，你在组件实例化之前就访问component变量赋值，此时component本身是undefined

按以下步骤修改测试代码即可：

1. 修正TestBed的providers配置，用useValue把你定义的spy对象注入
2. 给getSystemUser spy方法预设返回值，匹配构造函数中访问res.source._value的结构
3. 调整beforeEach的执行顺序，先创建组件实例再做赋值操作

fdescribe('ManagePermissionsComponent', () => {
  let component: ManagePermissionsComponent;
  let fixture: ComponentFixture<ManagePermissionsComponent>;
  // 定义mock返回的用户数据
  const mockSystemUser = {
    source: {
      _value: {
        'username': 'akvishwakarma@netlink.com', 
        'firstName': 'Avani', 
        'lastName': 'Vishwakarma', 
        'systemUserId': 1, 
        'isActive': true, 
        'password' :"Avani123", 
        'oldPassword':'Avani123', 
        'email':'abhargav@gmail.com', 
        'contact':123, 
        'imageId':'jpg', 
        'isAccountLocked':true, 
        'accountLocked':'dds',
        'accountLockedDate':null, 
        'loginAttempt':null, 
        'createdDate':null, 
        'createdBy':'aparna', 
        'updatedBy':'jdsjsd', 
        'updatedDate':null, 
        'otpGenerated':'dfdsf', 
        'otpGeneratedDate':'sdsd'
      }
    }
  };
  // 创建spy对象，给getSystemUser预设返回值
  let dataSharing = jasmine.createSpyObj('DataSharingService', ['getSystemUser']);
  dataSharing.getSystemUser.and.returnValue(mockSystemUser);

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      declarations: [ManagePermissionsComponent],
      // 修正providers配置，用useValue注入spy对象
      providers: [
        {provide: DataSharingService, useValue: dataSharing }, 
        SessionStorageService
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    // 先创建组件实例，此时构造函数会自动调用getSystemUser获取mock数据
    fixture = TestBed.createComponent(ManagePermissionsComponent);
    component = fixture.debugElement.componentInstance;
    fixture.detectChanges();
  });

  // 后续可以加测试用例，比如验证systemUserId为1时disableButton为false
  it('should set disableButton to false when systemUserId is 1', () => {
    expect(component.disableButton).toBeFalse();
  });
});

如果需要覆盖systemUserId不等于1的分支，只需要在对应测试用例中重新给getSystemUser设置返回值，再重新创建组件实例即可。

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