Transloco: Cannot read property 'translate' of undefined in karma spec test

[Siedlerchr]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Spec test fails and says translate(....)is undefined.

Expected behavior

Spec test runs sucessful and translate does not throw an error.

Minimal reproduction of the problem with instructions

Create a component and call translate('some key') somewhere in it.
import { translate } from '@ngneat/transloco';

Create a spec test (default generated)
Add the following import:
import { getTranslocoModule } from '../transloco-testing-module';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MapContainerComponent ],
      imports: [HttpClientTestingModule, RouterTestingModule, getTranslocoModule()],
      providers: [Network],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    .compileComponents();
  }));

Transloco Testing Module:

import { TranslocoTestingModule, TranslocoConfig } from '@ngneat/transloco';
import en from '../assets/i18n/en-US.json'
import de from '../assets/i18n/de-DE.json'

export function getTranslocoModule(config: Partial<TranslocoConfig> = {}) {
  return TranslocoTestingModule.withLangs(
    { en, de },
    {
      availableLangs: ['en-US', 'de-DE'],
      defaultLang: 'en-US',
      reRenderOnLangChange: true,
      ...config
    }
  );
}

Environment

Angular version: 8.1.2

    "@ngneat/transloco": "^2.13.5",
    "@ngneat/transloco-locale": "^1.0.1",




Browser:


[x] Chrome (desktop) version XX
[ ] Chrome (Android) version XX
[ ] Chrome (iOS) version XX
[x] Firefox version XX
[ ] Safari (desktop) version XX
[ ] Safari (iOS) version XX
[ ] IE version XX
[ ] Edge version XX


For Tooling issues:


Node version: 12.14.1
Platform:  Windows, Linux


Others:

[stijnvn]

I can confirm this bug also exists in combination with Angular 9.0.2.

When I change my component to explicitly reference the TranslocoService, I can avoid the undefined error, but the key is not translated.

constructor(private translocoService: TranslocoService) {}

...
this.translocoService.translate('some-key); // The key is not translated
...

This only occurs in the unit test. In the application it is working fine.

[ArielGueta]

Works for me. Can you reproduce it?

[shaharkazaz]

@Siedlerchr Feel free to reopen the issue and provide a reproduction 🙂 .

[tommueller]

I actually just ran into the same issue and solved it by importing my TranslocoRootModule additionally to the TranslocoTestingModule. So basically like this:

const createComponent = createComponentFactory({
  component: AComponent,
  imports: [
    TranslocoRootModule, // not working without this!
    getTranslocoTestingModule()
  ]
});

with the component looking like this:

import { Component, Input } from '@angular/core';
import { translate } from '@ngneat/transloco';

@Component({...})
export class AComponent {
  @Input() label = translate('ACTIONS.EDIT');
}

and my transloco-testing-module:

export function getTranslocoTestingModule(config: Partial<TranslocoConfig> = {}) {
  return TranslocoTestingModule.withLangs(
    { en },
    {
      availableLangs: ['en'],
      defaultLang: 'en',
      ...config
    }
  );
}

[tommueller]

Nope my fix did not work. I still get the error, but only sometimes.
Around 30% of my test-runs fail with this bug. Will try to produce a repro when I find the time.

I can also confirm stijnvn remark that replacing translate with translocoService.translate resolves the bug, but the text does not get translated.

[tommueller]

@shaharkazaz here is a repro: https://github.com/tommueller/translate-repro

[shaharkazaz]

@tommueller I'll take a look when I get the chance 🙂

[DaveGold]

I also experience an issue when using the getTranslocoModule.
I am testing some code that is using translocoService.translate but the key is not translated in the unit test but it does in the application.

Please reopen

Angular 10.3, Transloco 2.19.1, Jest 26.0.8

[shaharkazaz]

@DaveGold are you sure it's related to this issue?

[developer239]

Why is this closed? 😄

[shaharkazaz]

@developer239 I personally didn't have time to get to it in the last couple of months so it just got missed, thanks for bringing this up again 🙂

@tommueller Thank you for the reproduction, here is a summary of the issues discussed above:
There are 2 issues here that got mixed together:

1. TypeError: Cannot read property 'translate' of undefined thrown when using the pure translate function.
2. Values don't get translated when using the pure translate or the translocoService.translate.

Explnations

1. This issue was caused since the pure translate function is a proxy the translocoService.translate so while in your actual app the service was already initialized when you got to that component if you didn't provide it as part of your testing you get TypeError: Cannot read property 'translate' of undefined.

2. This is stated in the docs, and also applies to the specs, it's your responsibility to make sure that the translations are already loaded when using the synchronous translate function.

Solutions

1. I'll update the testing module to take care of the injection.
2. While this behavior makes sense in the real app, it could be tiring to make sure the translations are loaded in specs, I'll add an option to preload all the given langs via the module. ({ preloadLangs: true }).
   You only need to use this option if you aren't using transloco in the template since if you are it takes care of the loading for you.
   Note that as part of this change TranslocoTestingModule.withLangs is deprecated (still supported and also supports the new option but will be removed in v3) and you should now use TranslocoTestingModule.forRoot.
3. I'll update all the docs accordingly.

[tommueller]

Thanks, will give feedback ASAP once it's released.

[shaharkazaz]

@tommueller released in v2.20.0

[tommueller]

@shaharkazaz sorry for the late response, I was lucky enough to enjoy some extended holiday season.

Just checked out the v2.20.0 release and can confirm that the change fixes the issue. Thanks a bunch!

[DaveGold]

I can confirm with { preloadLangs: true } that my unit tests are working again with translation