Angular单元测试报错：Cannot read properties of undefined (reading:'viewMode')

错误根源 #

组件中的docProcess仅声明了IDocProcess类型，但未初始化实例，测试时直接访问component.docProcess.viewMode会因docProcess为undefined抛出错误。

解决步骤 #

1. 初始化docProcess实例 #

在测试的beforeEach或测试用例中，给component.docProcess赋值一个符合IDocProcess接口的对象，确保它不是undefined：

beforeEach(() => {
  fixture = TestBed.createComponent(CallsComponent);
  component = fixture.componentInstance;
  // 初始化docProcess实例
  component.docProcess = {
    viewMode: false,
    editMode: false,
    deleteMode: false
  };
});

2. SpyOn目标方法makeCalls #

要断言方法是否被调用，需先通过spyOn监听该方法，避免实际执行方法逻辑：

spyOn(component, 'makeCalls');

3. 完整测试用例（覆盖两种场景） #

it('should call makeCalls when docProcess.viewMode is true', () => {
  spyOn(component, 'makeCalls');
  component.docProcess.viewMode = true;
  component.onCalling(mockArgsData);
  expect(component.makeCalls).toHaveBeenCalledWith(mockArgsData);
});

it('should NOT call makeCalls when docProcess.viewMode is false', () => {
  spyOn(component, 'makeCalls');
  component.docProcess.viewMode = false;
  component.onCalling(mockArgsData);
  expect(component.makeCalls).not.toHaveBeenCalled();
});

通用解决方案（针对类似undefined错误） #

遇到Cannot read/set properties of undefined错误时，核心是确保被访问的变量已初始化：

• 如果是组件类的属性，在测试前给它赋初始值（基本类型赋默认值，对象类型创建对应实例）
• 如果是依赖注入的服务，需在TestBed.configureTestingModule中提供对应的mock或实例

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