Bug: Unable to correctly import TranslocoTestingModule.forRoot in component unit test

[mlz11]

🙏🏻 First of all I am sorry for using the bug template if it is not the appropriate one for my situation.
I feel like it is more a help request than a bug issue.

I have a component NavbarComponent declared in a CoreModule ⬇️

core.module.ts

@NgModule({
  declarations: [NavbarComponent],
  imports: [CommonModule, TranslocoModule],
  providers: [
    provideTranslocoScope({
      scope: 'core',
      loader: scopeLoader(
        (lang: string, root: string) => import(`./${root}/${lang}.json`)
      ),
    }),
  ],
  exports: [NavbarComponent],
})
export class CoreModule {}

fr.json

{
  "test": "Hello"
}

navbar.component.html

<nav *transloco="let t">
  <span>{{ t('core.test') }}</span>
</nav>

📖 I am introducing ngneat/transloco to my project. I tried following the library's documentation on Unit Testing and it all works well when written as below ⬇️

✅ navbar.component.spec.ts

describe('NavbarComponent', () => {
  it('should create', async () => {
    await TestBed.configureTestingModule({
      declarations: [NavbarComponent],
      imports: [getTranslocoModule()],
    }).compileComponents();

    const fixture = TestBed.createComponent(NavbarComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.innerHTML).toContain('<span>Hello</span>');
  });
});

😢 But when I try using MockBuilder(as suggested by @satanTime in #197 - I know the issue has been fixed and NgModuleWithProviders are now supported but I am not sure how I should add TranslocoTestingModule.forRoot) like below, I get the following error ⬇️

transloco-testing.module.ts

export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
  return TranslocoTestingModule.forRoot({
    langs: {
      fr,
      it,
      'search/fr': search,
      'search/it': searchIt,
      'core/fr': core,
      'core/it': coreIt,
    },
    translocoConfig: {
      availableLangs: ['fr', 'it'],
      defaultLang: 'fr',
    },
    preloadLangs: true,
    ...options,
  });
}

❌ navbar.component.spec.ts

describe('NavbarComponent', () => {
  it('should create', async () => {
    const ngModule = MockBuilder(NavbarComponent, CoreModule).build();
    ngModule.imports = [...ngModule.imports!, getTranslocoModule()];

    await TestBed.configureTestingModule(ngModule).compileComponents();
    const fixture = TestBed.createComponent(NavbarComponent);

    expect(fixture.nativeElement.innerHTML).toContain('<span>Hello</span>');
  });
});

TypeError: Cannot read properties of undefined (reading 'toPromise')

at node_modules/@ngneat/transloco/fesm2022/ngneat-transloco.mjs:1494:37
at Array.map ()
at preloadAllLangs (node_modules/@ngneat/transloco/fesm2022/ngneat-transloco.mjs:1490:42)

The error comes from the initTranslocoService method in ngneat-transloco.mjs that is used to create an instance of TranslocoTestingModule.forRoot ⬇️

function initTranslocoService(service, langs = {}, options) {
    const preloadAllLangs = () => options.preloadLangs
        ? Promise.all(Object.keys(langs).map((lang) => {
            console.log('service.load(lang) = ', service.load(lang)) //logs undefined
            return service.load(lang).toPromise()}))
        : Promise.resolve();
    return preloadAllLangs;
}

Could you please give me a hint of what I am doing wrong ?

Thank you ! 🙏🏻

[satanTime]

Hi @mlz11,

you can write a test like that:

  describe('ng-mocks', () => {
    beforeEach(() => MockBuilder([
      NavbarComponent,
      TranslocoModule,
      ], CoreModule)
      .provide(getTranslocoModule().providers ?? [])
    );

    it('tests translation', () => {
      const fixture = TestBed.createComponent(NavbarComponent);
      fixture.detectChanges();

      expect(fixture.nativeElement.innerHTML).toContain('<span>Hello</span>');
    });
  });

TranslocoTestingModule uses TranslocoModule with special providers.
So to keep TranslocoModule in the test,
we just need to keep TranslocoModule and to add providers from TranslocoTestingModule.

[mlz11]

That seems to work I confirm. Thanks for your help :)

[MikeDabrowski]

How would it look like according to the new way (providers instead modules)?

Transloco is now provided using provideTransloco, which consumes config + loader. The old way with TranslocoTestingModule.forRoot consumed for example:

langs: { [Language.enGB]: en, [Language.deDE]: de, ...langs },
      translocoConfig: {
        availableLangs: [Language.enGB, Language.deDE],
        defaultLang: Language.enGB,
        ...config,
      },
      preloadLangs,

It might very well be the problem with transloco itself - not providing 'provider' for tests.