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 flat@5.0.2.
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.