Bug(scope): Testing, Cannot read properties of null (reading 'nativeElement')

[Daniel-MM-Baptista]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Don't know / other

Is this a regression?

No

Current behavior

Trying to run any test involving querying the DOM of any component using the structural directive returns an error of property being null, like the element doesn't even exist.

TypeError: Cannot read properties of null (reading 'nativeElement')
    at UserContext.apply (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/nav-menu/side-bar/side-bar.component.spec.ts:50:54)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:375:26)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:39)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:374:52)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:134:43)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:582:34)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:597:20)
    at <Jasmine>

Expected behavior

Test should pass with the text of the H1 header being "Testing"

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

See current behaviour

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 4.2.2
Angular: 15.1.5
Node: 18.17.0
Package Manager: NPM
OS: Windows 10

Browser

Chrome

Additional context

I tried making another test with the element outside of the structural directive and that works without issues, the problem only occurs when using transloco's structural directive for translation.

transloco-testing.module.ts

import { TranslocoTestingModule, TranslocoTestingOptions } from '@ngneat/transloco';
import en from '../../assets/i18n/en.json';
import pt from '../../assets/i18n/pt.json';

export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
  return TranslocoTestingModule.forRoot({
    langs: { en, pt },
    translocoConfig: {
      availableLangs: ['en', 'pt'],
      defaultLang: 'pt',
    },
    preloadLangs: true,
    ...options
  });
}

side-bar.component.spec.ts

describe('SideBarComponent', () => {
  let component: SideBarComponent;
  let fixture: ComponentFixture<SideBarComponent>;
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ SideBarComponent ],
      imports: [
        RouterTestingModule.withRoutes([]),
        getTranslocoModule()
      ],
      providers: [
        TokenService
      ]
    })
    .compileComponents();

    router = TestBed.get(Router);
    fixture = TestBed.createComponent(SideBarComponent);
    component = fixture.componentInstance;
    component.isExpanded = true;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('pls work', () => {
    expect(fixture.debugElement.query(By.css('h1'))
               .nativeElement.innerText).toBe('Testing');
  });

  it('should navigate to starting page in log out', () => {
    const routerSpy = spyOn(router, 'navigate')
    expect(component).toBeTruthy();
    component.logOut();
    expect(routerSpy).toHaveBeenCalledWith(["/"]);
  });
});

side-bar.component.html

<ng-container *transloco="let t;">
  <h1>Testing</h1>
  <mat-nav-list id="nav-list">
    <button mat-button class="nav-item-button" [routerLink]="['profile']" (click)="isMobile ? expandMenu() : false">
      <mat-icon class="nav-item-icon">person</mat-icon>
      <span class="nav-item-label" *ngIf="isExpanded">{{t('navbar.profile-label')}}</span>
    </button>
    <button mat-button class="nav-item-button" [routerLink]="['inventory']" (click)="isMobile ? expandMenu() : false">
      <mat-icon svgIcon="inventory" class="nav-item-icon icon-svg"></mat-icon>
      <span class="nav-item-label" *ngIf="isExpanded">{{t('navbar.inventory-label')}}</span>
    </button>
    <button mat-button class="nav-item-button" [routerLink]="['requests', RequestType.Requisition]" (click)="isMobile ? expandMenu() : false">
      <mat-icon svgIcon="requisition" class="nav-item-icon icon-svg"></mat-icon>
      <span class="nav-item-label" *ngIf="isExpanded">{{t('navbar.requisitions-label')}}</span>
    </button>
    <button mat-button class="nav-item-button" [routerLink]="['requests', RequestType.Devolution]" (click)="isMobile ? expandMenu() : false">
      <mat-icon svgIcon="devolution" class="nav-item-icon icon-svg"></mat-icon>
      <span class="nav-item-label" *ngIf="isExpanded">{{t('navbar.devolutions-label')}}</span>
    </button>
    <button *ngIf="userRole === UserRole.Admin" mat-button class="nav-item-button" [routerLink]="['users']" (click)="isMobile ? expandMenu() : false">
      <mat-icon class="nav-item-icon">groups</mat-icon>
      <span class="nav-item-label" *ngIf="isExpanded">{{t('navbar.users-label')}}</span>
    </button>
    <button mat-button class="nav-item-button" (click)="logOut()">
      <mat-icon class="nav-item-icon">logout</mat-icon>
      <span class="nav-item-label" *ngIf="isExpanded">{{t('navbar.log-out-label')}}</span>
    </button>
  </mat-nav-list>
</ng-container>

I would like to make a pull request for this bug

No

[Piiiiiiiiiiiim]

Same here. It looks like an error is being swallowed. Running tests inside the [transloco-playground] (https://github.com/ngneat/transloco/tree/master/apps/transloco-playground) shows: Error: Module not found: Error: Package path . is not exported from package ....\node_modules\flat. Thanks to @elmarbeckmann, overriding @ngneat/translaco to use flat version 5.0.2 fixes the problem.

"overrides": {
    "@ngneat/transloco": {
      "flat": "5.0.2"
    }
  }

[shaharkazaz]

@Piiiiiiiiiiiim This doesn't seem related as he is using Transloco v4 which uses [email protected].
The example should work as expected, there is a very similar example we've made using spectator:

import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { OnPushComponent } from './on-push.component';
import { getTranslocoModule } from '../transloco-testing.module';
import { TranslocoService } from '@ngneat/transloco';

describe('OnPushComponent', () => {
  let spectator: Spectator<OnPushComponent>;
  const createComponent = createComponentFactory({
    component: OnPushComponent,
    imports: [
      getTranslocoModule({
        translocoConfig: { reRenderOnLangChange: true },
      }),
    ],
  });

  beforeEach(() => (spectator = createComponent()));

  it('should translate', () => {
    expect(spectator.query('.structural [data-cy=regular]')).toHaveText(
      'Regular: home spanish'
    );
    expect(spectator.query('.structural [data-cy=current-lang]')).toHaveText(
      'Current Lang: es'
    );
    expect(spectator.query('.pipe [data-cy=p-regular]')).toHaveText(
      'Regular: home spanish'
    );
    expect(spectator.query('.pipe [data-cy=p-regular]')).toHaveText(
      'Regular: home spanish'
    );
    const service = spectator.inject(TranslocoService);
    service.setActiveLang('en');
    spectator.detectChanges();
    expect(spectator.query('.structural [data-cy=regular]')).toHaveText(
      'Regular: home english'
    );
    expect(spectator.query('.structural [data-cy=current-lang]')).toHaveText(
      'Current Lang: en'
    );
    expect(spectator.query('.pipe [data-cy=p-regular]')).toHaveText(
      'Regular: home english'
    );
  });
});

Please share a repo with the setup so I can take a further look.

[skatterwe]

Just as a note, we have exactly the same issue:

#745

And I've postponed the whole topic and had a look at it yesterday. Interestingly, in our design system the tests now execute, but in a department shared component lib, it continues to fail. I was not able to spot the difference yet. Setup, Versions etc seem identical.

I'll see if I can find a way to reproduce it either in a Stackblitz or maybe in a separate repo and publish that in github

[skatterwe]

I tried reproducing it, but I wasn't able to with a clean nx repo (encountered other bugs) but not this one. I'm trying to move our components into a new nx repo and then see if I figure out where the difference is.

[skatterwe]

I found out what is causing the issue, but I don't know how to best create a repo.

We have an internal published design system using transloco (its specified as peerDependency). As soon as I'm adding this as a dependency into my repository, the otherwise working setup:

jest.config.ts:

  moduleNameMapper: {
    '^flat': 'node_modules/flat/index.js',
  },
  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],

fails inside the index.d.ts:

/.../transloco-test/node_modules/flat/index.d.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export interface FlattenOptions {
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      3 | import { By } from '@angular/platform-browser';
      4 | import { Router } from '@angular/router';
    > 5 | import { TranslocoModule } from '@jsverse/transloco';
        | ^
      6 | import { getTranslocoModule } from '../../../transloco-testing.module';
      7 | import { ForbiddenComponent } from './forbidden.component';
      8 |

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (../../node_modules/@jsverse/transloco/fesm2022/jsverse-transloco.mjs:5:64)
      at Object.<anonymous> (src/lib/sample-directory/routed/forbidden/forbidden.component.spec.ts:5:1)

If I change the transformIgnorePatterns to this:

  transformIgnorePatterns: ['node_modules/?!(.\\*.mjs$)'],

The error goes away, but I'm assuming now too many things are actually excluded and then, the transloco directive fails to work and I get the undefined error

[skatterwe]

We fixed it by applying this change to our jest.config.ts: #745 (comment)