使用 Jasmine 对 Ionic Angular 中的 IonInput 参数进行单元测试：无法读取未定义的属性（读取“应用”）

Question

在自定义输入组件内的 setter 中，我想在 Jasmine 中进行通过 getInputElement 函数的测试。

@ViewChild('customInput')
public set customInput(value: IonInput) {
    value.getInputElement().then(() => this.registerTextMask());
}

使用 beforeEach 初始化组件中的测试后，出现错误 TypeError：value.getInputElement 不是函数

beforeEach(async () => {
    await TestBed.configureTestingModule({
        imports: [
            HttpClientTestingModule,
            TranslateModule.forRoot({
                loader: { provide: TranslateLoader, useClass: TranslateLoaderMock }
            }),
        ],
        declarations: [CustomInputComponent],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();

    fixture = TestBed.createComponent(CustomInputComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
});

后来我添加了 IonicModule 导入以将 Ionic 配置添加到测试中，现在我收到此错误：

TypeError: Cannot read properties of undefined (reading 'apply')
            at apply (node_modules/@ionic/angular/fesm2015/ionic-angular.js:356:71)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:375:26)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:39)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:374:52)
            at Zone.run (node_modules/zone.js/fesm2015/zone.js:134:43)
            at NgZone.runOutsideAngular (node_modules/@angular/core/fesm2020/core.mjs:24212:28)
            at IonInput.getInputElement (node_modules/@ionic/angular/fesm2015/ionic-angular.js:356:27)
            at CustomInputComponent.set customInput [as customInput] (src/app/components/custom-input/custom-input.component.ts:39:11)
            at viewQueryFn (ng:///CustomInputComponent.js:20:76)
            at executeViewQueryFn (node_modules/@angular/core/fesm2020/core.mjs:11649:5)

我想不出任何想法来避免错误并同时输入承诺。我该如何解决这个问题？有没有办法模拟 value 参数？

Answer 1

尝试更改

ViewChild

定义以使用视图子级的

IonInput

属性获取

read

！

@ViewChild('customInput', { read: IonInput }) // <- changed here!
public set customInput(value: IonInput) {
    value.getInputElement().then(() => this.registerTextMask());
}