test failing with "Cannot read property 'reRenderOnLangChange' of undefined"

I’m submitting a…

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

Not sure if bug or documentation issue or support request. I’m not sure if I’m setting it up wrong, or if it is an actual bug. I worked around the issue, but I’ll dump some stuff here to see if it helps at all.

Current behavior

Test fails throwing error

Summary of all failing tests
 FAIL  src/app/contacts/components/contact-card/contact-card.component.spec.ts (32.098s
  ● ContactCardComponent › should create

    TypeError: Cannot read property 'reRenderOnLangChange' of undefined

      at shouldListenToLangChanges (node_modules/@ngneat/transloco/bundles/ng:/@ngneat/
      at new TranslocoPipe (node_modules/@ngneat/transloco/bundles/ng:/@ngneat/transloc
      at TranslocoPipe_Factory (node_modules/@ngneat/transloco/bundles/ngneat-transloco
      at ɵɵpipe (../packages/core/src/render3/pipe.ts:55:24)
      at ContactCardComponent_Template (ng:/ContactCardComponent.js:78:9)
      at executeTemplate (../packages/core/src/render3/instructions/shared.ts:559:5)
      at renderView (../packages/core/src/render3/instructions/shared.ts:351:7)
      at renderComponent (../packages/core/src/render3/instructions/shared.ts:1759:3)
      at renderChildComponents (../packages/core/src/render3/instructions/shared.ts:154
      at renderView (../packages/core/src/render3/instructions/shared.ts:380:7)
      at ComponentFactory.Object.<anonymous>.ComponentFactory.create (../packages/core/
      at initComponent (../packages/core/testing/src/r3_test_bed.ts:354:28)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:326:29)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)
      at NgZone.Object.<anonymous>.NgZone.run (../packages/core/src/zone/ng_zone.ts:180
      at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../packages/
      at Function.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/t
      at createSpectator (node_modules/@ngneat/spectator/bundles/ng:/@ngneat/spectator/
      at node_modules/@ngneat/spectator/bundles/ng:/@ngneat/spectator/lib/spectator/cre
      at src/app/contacts/components/contact-card/contact-card.component.spec.ts:32:21
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)

  ● ContactCardComponent › should create

    expect(received).toBeTruthy()

    Received: undefined

      35 | 
      36 |     it("should create", () => {
    > 37 |         expect(component).toBeTruthy();
         |                           ^
      38 |     });
      39 | });
      40 |

      at src/app/contacts/components/contact-card/contact-card.component.spec.ts:37:27.ts:37:27
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:386:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:385:36)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:143:47)


Test Suites: 1 failed, 447 skipped, 1 of 448 total
Tests:       1 failed, 2873 skipped, 2874 total
Snapshots:   0 total
Time:        188.737s
Ran all test suites with tests matching "ContactCardComponent".

It is in a component that uses TranslocoPipe, which seems to be missing a config:

Similar working component:

It was failing when I provided a provideMockTranslate() … which I didn’t actually need, This function worked fine for components that only did translations in the typescript file using the TranslocoService, but failed when loaded while using the translate pipe.

I tried putting in some things in that useValue that I found around the internet, which seemed to correspond to the config, but it didn’t help: My fix was to not provide the TranslocoService for tests of components that use the pipe. I may have to revisit this once we have components that use both the service and the pipe, I’m not sure this is related to this specific issue, but maybe it can help someone.

Expected behavior

I wasn’t expecting config to be undefined, since config was in the TranslocoTestingModule just as the docs described. https://ngneat.github.io/transloco/docs/unit-testing

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: 10.0.10


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 13.7.0  
- Platform: Windows 

Others:

Jest version 9.0.0

[iiceman40]

Okay, I finally took the time and gave this a shot.

The problem occurs while running tests for a component that uses both the transloco pipe and the TranslocoService. If I write the unit test I add the TranslocoTestingModule so that the test won’t fail because of the missing pipe. Next I am mocking the TranslocoService to make it return a mocked translation that I can refer to in my expect statement. If I now run the test all tests in this component fail with the “Cannot read property ‘reRenderOnLangChange’ of undefined” error.

Check out https://github.com/iiceman40/TranslocoTest and simply run ng test.

[shaharkazaz]

@stephengeorgewest getTranslocoTestingModule should take care of what you need. provideMockTranslate isn’t part of the Transloco official lib. seems like it was made to mock the TranslocoService but our exported module takes care of that for you. (from v2.20.0)