Unit Testing

When running specs, we want to have the languages available immediately, in a synchronous fashion. Transloco provides you with a TranslocoTestingModule, where you can pass the languages you need in your specs, and the config.

We recommend to be DRY and create a module factory function that we can use in each spec, For example:

transloco-testing.module.ts

import { TranslocoTestingModule, TranslocoTestingOptions } from '@ngneat/transloco';import en from '../assets/i18n/en.json';import es from '../assets/i18n/es.json';
export function getTranslocoModule(options: TranslocoTestingOptions = {}) {  return TranslocoTestingModule.forRoot({    langs: { en, es },    translocoConfig: {      availableLangs: ['en', 'es'],      defaultLang: 'en',    },    preloadLangs: true,    ...options  });}

Now we can use it in each spec file:

app.component.spec.ts

describe('AppComponent', () => {  beforeEach(async(() => {    TestBed.configureTestingModule({      imports: [getTranslocoModule()],      declarations: [AppComponent]    }).compileComponents();  }));
  it('should work', () => {    const fixture = TestBed.createComponent(AppComponent);    fixture.detectChanges();    expect(fixture.debugElement.query(By.css('h1'))               .nativeElement.innerText).toBe('hello');  });});

You can find an example here.

If you need to test scopes, you should add them as languages, for example:

transloco-testing.module.ts

export function getTranslocoModule(options: TranslocoTestingOptions = {}) {  return TranslocoTestingModule.forRoot({    langs: {       en,       es,      'admin-page/en': admin,      'admin-page/es': adminSpanish,      },    translocoConfig: {      availableLangs: ['en', 'es'],      defaultLang: 'en',    },    preloadLangs: true,    ...options  });}

You can find an example here.

Note that in order to import JSON files, you need to configure the TypeScript compiler by adding the following properties in tsconfig.json:

{  "resolveJsonModule": true,  "esModuleInterop": true}