ngx-translate 单元测试问题

Question

0

我正在使用 ngx-translate 库并且在单元测试方面遇到了一些问题，因为它找不到某些提供。问题是即使我放置了一个提供者，它也一直要求另一个提供者并且它永远无法解决问题。

所以基本上我对 mi auth 组件进行了单元测试，它在其构造函数中使用了翻译服务。

测试问我（就像我在下一张图片中显示的那样）他们需要“TraslateService”作为提供者，所以我添加了他们。

  providers:[
    TranslateService
  ]

但是一旦我添加了这个，它就会要求翻译提供另一件事，并且它会继续下去。我相信解决方案应该是另一种方式。

错误图片

app.module

  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
       },
    defaultLanguage: 'en'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Quiero destacar que el sharedModule, ya exporta el translateModule que se usa otros lugares de la app.

我想说的是，在 sharedModule、TranslateModule 上，它已经被导出，用于应用程序的其他地方。

共享模块

@NgModule({
  imports: [
    ...,
    TranslateModule,
  ],
  exports: [
    ...,
    TranslateModule
  ],
  providers:[
  ]
})
export class SharedModule { }

** 此外，auth 也是一个惰性模块。

auth.module**

@NgModule({
  declarations: [
    AuthComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    SharedModule
  ]
})
export class AuthModule { }

auth.component.ts

export class AuthComponent implements OnInit { 

  constructor(public translate: TranslateService)
}

Spect.ts

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports:[
        HttpClientTestingModule,
        SharedModule,
      ],
      providers:[
        TranslateService,
      ],
      declarations: [ AuthComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AuthComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

知道如何解决这个问题吗？

Answer 1

我会模拟 TranslateService 并模拟它所需的方法和属性。

这样做：

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports:[
        HttpClientTestingModule,
        SharedModule,
      ],
      providers:[
        // !! provide a mock for it
        { provide: TranslateService, useValue: { /* mock it however you wish */} }
      ],
      declarations: [ AuthComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AuthComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

在此处了解有关模拟外部依赖项的更多信息：https://testing-angular.com/testing-components-depending-on-services/#testing-components-depending-on-services

ngx-translate 单元测试问题

ngx-translate Problems with unit testing

angular

angularjs

typescript

unit-testing

angular-test