component does not re-render when async pipe is triggered

[sjbuysse]

Version info:
    "@testing-library/angular": "^9.3.1",
    "jest": "^26.0.1",
    "@angular/core": "~9.1.9",

Hi,
I made a project with nothing in it except this example component, to demonstrate the issue:

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'mwf-test-show',
  template: '<button (click)="toggleShow()" data-testid="toggle">toggle</button><div *ngIf="show$ | async" data-testid="getme">Here I am</div>',
})
export class TestSelectComponent {
  showSubj = new BehaviorSubject(false);
  show$ = this.showSubj.asObservable().pipe(tap(show => console.log(show)));

  toggleShow() {
    this.showSubj.next(true);
  }
}

In my test I use the waitFor function to see if the hidden div shows after toggling the Observable value to true, but it does not.
The console.log in the pipeline is triggered though. But it's as if the re-rendering does not happen.

  it('should show hidden text', async () => {
    const {component} = await setup();
    const select = component.queryByLabelText('Switch');
    const toggle = component.getByTestId('toggle');
    const hiddenText = component.queryByTestId('getme');
    expect(hiddenText).toBeNull();
    fireEvent.click(toggle);
    await waitFor(() => expect(hiddenText).not.toBeNull());
  });

[timdeschryver]

Hi, so this wasn't a bug after all 😅

You will have to query for the div inside the waitFor.
See the associated commit for the fix.

Fyi, it's recommended to use the findBy query to "wait" until an element becomes visible.

[sjbuysse]

Thanks for the insight @timdeschryver !

[timdeschryver]

🎉 This issue has been resolved in version 9.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀