Question

我无法使用ngx-translate pipe与Karma Jasmine进行具有子组件的组件的单元测试

通过注入TranslatexxxxxStub，我可以单独测试子组件。但是我没有找到使用子组件测试父组件的方法。我的角度应用程序使用延迟加载。这是代码

DatetimeComponentModule（子级）

@NgModule({
  declarations: [
    DatetimeComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    TranslateModule.forChild(),
    OwlDateTimeModule, 
    OwlNativeDateTimeModule
  ],
  exports: [
    DatetimeComponent
  ]
})
export class DatetimeComponentModule {}

由于这个原因，我可以对其进行单元测试

describe('DatetimeComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DatetimeComponent, TranslatePipeStub ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      imports: [ TranslateModule.forRoot() ],
      providers:[
        { provide: TranslatePipe, useClass: TranslatePipeStub },
        { provide: TranslateService, useClass: TranslateServiceStub },
        { provide: AppsFrameworkConfig, useValue: configTest }
      ]
    });
    fixture = TestBed.createComponent(DatetimeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    rootElement = fixture.debugElement
    fixture.whenStable().then(() => fixture.detectChanges());
  }));

这是BatchFormComponentModule（父级）

@NgModule({
  declarations: [
    BatchFormComponent
  ],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule.forChild(),
    DatetimeComponentModule
  ],
  entryComponents: [
    BatchFormComponent
  ]
})
export class BatchFormComponentModule { }

这是我的BatchFormComponent单元测试

describe('BatchFormComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [BatchFormComponent, TranslatePipeStub],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [
        IonicModule,
        FormsModule,
        ReactiveFormsModule,
        TranslateModule.forChild(),
        DatetimeComponentModule
      ],
      providers: [
        FormBuilder,
        { provide: TranslatePipe, useClass: TranslatePipeStub },
        { provide: TranslateService, useClass: TranslateServiceStub },
        { provide: ModalController, useClass: UxComponentControllerStub },
        { provide: NavParams, useClass: NavParamsMock },
        { provide: AppsFrameworkConfig, useValue: configTest },     
      ]
    });
    fixture = TestBed.createComponent(BatchFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    rootElement = fixture.debugElement
    fixture.whenStable().then(() => fixture.detectChanges());
  }));

不幸的是我遇到了这个错误

TypeError：无法读取未定义的属性“ subscribe” 在TranslatePipe.push ../ node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js.TranslatePipe.transform （http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js:1540:1）

如果我从父级组件中删除了子组件，则不再有任何问题。因此，我认为这是因为我的Stub无法很好地加载DatetimeComponent。

单元测试时如何使用提供特定模块的子组件？

0 个答案: