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

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:

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15

Commits related to this issue

fix(#175): work around translate error see https://github.com/ngneat/transloco/issues/250 — committed to s-blu/writerey by s-blu 4 years ago
fix: 🐛 service not initialized in testing module Deprecated the withLangs function in the testing module and created withOptions Closes: #250 — committed to jsverse/transloco by shaharkazaz 4 years ago

Most upvoted comments

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.

stijnvn on Mar 5, 2020

@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:

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

Explnations

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.
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

I’ll update the testing module to take care of the injection.
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.
I’ll update all the docs accordingly.

shaharkazaz on Dec 16, 2020

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

tommueller on Oct 20, 2020