Angular 14: Test a ngFor using Jest

This is my simple breadcrumbs component. I want to test if the property active is inside the routerLink.

<nav>
  <ol>
    <ng-container *ngFor="let breadcrumb of breadcrumbs">
      <li
        [ngClass]="{ active: breadcrumb.active }"
        *ngIf="!breadcrumb.disabled"
      >
        <span *ngIf="breadcrumb.active">{{ breadcrumb.text }}</span>

        <a *ngIf="!breadcrumb.active" [routerLink]="breadcrumb.to">{{
          breadcrumb.text
        }}</a>
      </li>
    </ng-container>
  </ol>
</nav

I want to get the <a> HTML element, but I always get null. I have tried with compiled.querySelector('a') but the same occurs. I want the <a> HTML element, no matter if I have 1, 2 o 3 elements.

I also want to access to the routerLink attribute, but if I use .getAttribute('routerLink') I get a null value.

describe('BreadcrumbsComponent', () => {
  let component: BreadcrumbsComponent;
  let fixture: ComponentFixture<BreadcrumbsComponent>;
  let compiled: HTMLElement;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [BreadcrumbsComponent],
      imports: [IonicModule.forRoot(), RouterTestingModule],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BreadcrumbsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    compiled = fixture.nativeElement;
  });

  test('should receive breadcrumb prop', async () => {
    component.breadcrumbs = [
      {
        text: 'Test',
        disabled: false,
        to: '/route',
        active: true,
      },
    ];

    await fixture.whenStable();

    const a = fixture.debugElement.nativeElement.querySelector('nav'); // null

    fixture.detectChanges();
  });
});

I think it has to be related with the lifecycle because if I tried to get the <nav> element, I'm able to.

The problem arise when I tried to access an element inside the for loop.

1. You should detect the changes after the initialization of the breadcrumbs
2. with active = true, the ngIf will be false so the <a> will not be displayed

I found the solution and I think it's related with the detectChanges() method probably because it wasn't updating the breadcrumbs prop to the component.

test('should match breadcrumb to with href property', async () => {
  component.breadcrumbs = [
    {
      text: 'Test',
      disabled: false,
      to: '/route',
      active: false,
    },
  ];
  fixture.detectChanges();

  const href = compiled.querySelector('a').getAttribute('href');
  expect(href).toBe(component.breadcrumbs[0].to);
});