Ionic Angular Jasmine测试IonInput参数：解决apply未定义错误

问题根源 #

直接导入IonicModule会引入Ionic内部复杂依赖，触发Cannot read properties of undefined (reading 'apply')错误；不导入的话，Angular查询到的IonInput实例缺少getInputElement方法，导致TypeError: value.getInputElement is not a function。

解决方案：Mock IonInput实例 #

绕过Ionic真实组件的初始化逻辑，直接创建Mock对象并传入组件的setter，既避免依赖问题，又能验证目标逻辑。

完整测试代码示例 #

describe('CustomInputComponent', () => {
  let component: CustomInputComponent;
  let fixture: ComponentFixture<CustomInputComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        TranslateModule.forRoot({
          loader: { provide: TranslateLoader, useClass: TranslateLoaderMock }
        }),
      ],
      declarations: [CustomInputComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA], // 允许使用ion-input自定义元素
    }).compileComponents();

    fixture = TestBed.createComponent(CustomInputComponent);
    component = fixture.componentInstance;
    // 注释掉fixture.detectChanges()，避免提前触发ViewChild查询导致报错
  });

  it('should trigger registerTextMask after getInputElement resolves', async () => {
    // 1. 创建Mock IonInput对象，模拟getInputElement方法返回resolved Promise
    const mockIonInput = {
      getInputElement: jasmine.createSpy().and.returnValue(Promise.resolve(document.createElement('input')))
    };

    // 2. 监听registerTextMask方法，验证是否被调用
    const registerSpy = spyOn(component, 'registerTextMask');

    // 3. 调用public setter传入mock对象，触发组件逻辑
    component.customInput = mockIonInput as unknown as IonInput;

    // 4. 等待Promise执行完成
    await fixture.whenStable();

    // 5. 验证方法调用情况
    expect(mockIonInput.getInputElement).toHaveBeenCalled();
    expect(registerSpy).toHaveBeenCalled();
  });
});

关键说明 #

1. 移除fixture.detectChanges()：避免Angular提前执行ViewChild查询，拿到未初始化的IonInput实例导致报错。
2. 手动传入Mock对象：利用组件的public setter直接注入Mock实例，绕过Angular的ViewChild依赖查询逻辑。
3. 验证异步逻辑：通过await fixture.whenStable()等待getInputElement返回的Promise完成，确保后续逻辑执行完毕再做断言。

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