ngx-translate如何测试组件

Question

我有一个使用这个库的应用程序。如何使用它测试组件？我不想测试该库。我只需要启动测试而不会出现多个与TranslateModule、TranslateService和TranslateStore相关的错误... 直到编译时出现错误。

有没有一种简单的方法只是运行我的测试与这个依赖项？

再说一遍，我不想测试这个库（检查字符串是否被翻译），我需要运行那些依赖于这个库的组件的测试。

- Sergey

Answer 1

如果您不需要将键翻译，则可以在测试中像这样导入TranslateModule：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      ...
    ],
    imports: [
      TranslateModule.forRoot(),
    ],
    providers: [
      ...
    ]
  })
  .compileComponents();
}));

它只会显示翻译键

- Chantal

---

在Angular 8 + ngx-translate/core版本中运行良好。谢谢。 - stringnome

在 Angular 11 中运行良好。 - Shubham Dixit

也适用于Angular 15。 - undefined

Answer 2

对我来说，ngx-translate-testing 运行良好 https://www.npmjs.com/package/ngx-translate-testing

首先

import { TranslateTestingModule } from 'ngx-translate-testing';

然后

  imports: [
    ...
    TranslateTestingModule.withTranslations({ en: require('src/assets/i18n/en.json'), de: require('src/assets/i18n/de.json') })
  ], 

然后测试

  it('should render german title', inject([TranslateService], (translateService: TranslateService) => {
    translateService.setDefaultLang('de');
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.title').textContent).toContain('GERMANTITLE');
  }));

- wutzebaer

---

TS2307: 找不到模块“ngx-translate-testing”或其对应的类型声明。 - max

Answer 3

（已测试通过Angular 8.1.0和ngx-translate 11.0.1）

A）如果您在组件中使用翻译管道，请创建一个TranslateMockPipe并将其添加到您的规范的declarations数组中（如this issue所建议的）。

translate-mock.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';


@Pipe({
  name: "translate"
})
export class TranslateMockPipe implements PipeTransform {
  public name: string = "translate";

  public transform(query: string, ...args: any[]): any {
    return query;
  }
}

your-component.spec.ts

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ YourComponent, TranslateMockPipe ],
      imports: [
        ...
      ]
    })
    .compileComponents();
  }));

在某些情况下，我还需要执行步骤B）。

B）如果您在组件中直接使用翻译服务，例如this.translate.get('foo.bar')，则需要导入TranslateModule并将ngx-translate TranslateFakeLoader用作其loader。

your-component.spec.ts

import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core';
...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ YourComponent ], // you may add TranslateMockPipe from step 1 here, too
      imports: [
        ...
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: TranslateFakeLoader
          }
        })
      ]
    })
    .compileComponents();
  }));

这样，您可以使用ngx-translate内置的Stub，而无需像issue中建议的那样创建自己的Stub（我也尝试过它，但它没有起作用）。

- Katja

Answer 4

我所做的是将所有与翻译相关的配置都设置在一个单独的TranslationModule中，并将其导入到一个SharedModule中。

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

@NgModule({
  declarations: [],
  imports: [CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: IfYouHaveACustomFactory,
        deps: [HttpClient]
      }
    })],
  exports: [TranslateModule],
  providers: [],
})
export class TranslationModule {

}

然后可以将此导出到导入SharedModule的所有组件中，

@NgModule({
  imports: [],
  exports: [TranslationModule, SomeOtherModule],
})
export class SharedModule { }

在你的规范文件中，你可以简单地通过TestBed.configureTestingModule()导入SharedModule，例如：

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        SharedModule,
...

使用翻译服务或管道的组件的测试应该可以正常运行！

- Daniel B

---

我喜欢这个想法，但它对我不起作用。当我从app.module.ts中删除TranslateModule.forRoot({...})时，translate-pipe不再翻译任何内容。仅仅导入我的共享模块似乎不足以使其工作。 - Datz

在测试中，我遇到了像NullInjectorError: StaticInjectorError(DynamicTestModule)[TranslatePipe -> ChangeDetectorRef]: StaticInjectorError(Platform: core)[TranslatePipe -> ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef!这样的错误。 - Datz