Angular 18单元测试componentInstance未定义错误的解决方法

错误原因分析 #

你遇到的TypeError: Cannot read properties of undefined (reading 'componentInstance')，本质是组件初始化失败导致fixture对象为undefined。结合代码来看，主要存在三个问题：

1. 模块配置错误：ReactiveFormsModule放错位置 #

ReactiveFormsModule是Angular表单模块，需添加到imports数组中，而非providers——providers用于注册服务，模块必须放在imports才能生效。

2. 缺失组件依赖：未提供FormBuilder #

你的MyInputComponent大概率依赖FormBuilder（因导入了ReactiveForms相关模块），但测试模块未提供该依赖，导致组件实例化失败。

3. 断言方法使用错误：toHaveBeenCalled()需先创建函数间谍 #

直接调用component.addNumber()后用expect(component.addNumber).toHaveBeenCalled()无效，因为未通过spyOn创建函数间谍，无法追踪调用情况。

修复后的完整测试代码 #

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { MyInputComponent } from './my-input.component';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

describe('MyInputComponent', () => {
  let component: MyInputComponent;
  let fixture: ComponentFixture<MyInputComponent>;
  let addNumberSpy: jasmine.Spy;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      providers: [
        FormBuilder,
        provideMockStore()
      ],
      declarations: [MyInputComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyInputComponent);
    component = fixture.componentInstance;
    addNumberSpy = spyOn(component, 'addNumber').and.callThrough();
    fixture.detectChanges();
  });

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

  it('should call addNumber and return correct value', () => {
    const result = component.addNumber();
    expect(addNumberSpy).toHaveBeenCalled();
    expect(result).toBe(24);
  });
});

关键修改点说明 #

• 将ReactiveFormsModule从providers移至imports数组，确保表单模块正常加载。
• 在providers中添加FormBuilder，满足组件依赖需求，保证组件能成功实例化。
• 使用spyOn(component, 'addNumber').and.callThrough()创建函数间谍，既追踪调用情况，又保留原函数执行逻辑。
• 调整断言逻辑：调用函数后验证间谍被调用，同时可额外校验返回值是否符合预期。

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