ngx-translate how to test components

Question

I've got an application which uses this library. How do I test components with it? I DO NOT WANT TO TEST THE LIBRARY. I just need to start tests of my component without multiple errors about TranslateModule then TranslateService then TranslateStore ... until I get an error when compiling.

Is there an easy way to just run my tests with this dependency?

Once more, I don't want to test this library (check whether the string is being translated) I need to run tests on components which rely on this library.

Answer 1

If you don't necessarily need the keys to be translated you can import the TranslateModule in your test like this:

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

It will only show the translation keys

Answer 2

For me the ngx-translate-testing worked well https://www.npmjs.com/package/ngx-translate-testing

first

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

then

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

then test

  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');
  }));