angular - How can I unit test a component that uses NgrxLet LetDirective? - Stack Overflow

This is my stackblitz example where you can see in the terminal the test running and its result (or you can stop the execution and run jest).

I use the NgrxLet directive to consume the resulting observables in my components, like this:

myComponentponent.html

<ng-container *ngrxLet="myObs$ as myObs">
  <p> {{ myObs }} </p>
</ng-container>

myComponentponent.ts

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule, LetDirective],
  templateUrl: './my-componentponent.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit {
  myObs$: Observable<string> = of('');
  myObsService = inject(MyObsService);
  ngOnInit() {
    this.myObs$ = this.myObsService.myObs$;
  }
}

However this creates an odd situation where the content of the ng-container *ngrxLet="myObs$ as myObs" never renders in my jest unit tests, even though this works perfectly during the execution.

I've tried a few solutions I could think of after going through Angular's component testing documentation :

const myObscontent = 'myObs content';
describe('myComponent tests', () => {
 beforeEach(async () => {
  await TestBed.configureTestingModule({
   imports: [LetDirective, MyComponent],
    providers: [
     { provide: MyObsService, useValue: {myObs$: of(myObsContent)}},
    ],
  })pileComponents();

  fixture = TestBed.createComponent(MyComponent);
  component = fixtureponentInstance;
  fixture.detectChanges();
 })

 it('should show myObs content', async () => {
  await fixture.whenStable();
  expect(fixture.debugElement.nativeElement.textContent.includes(myObsContent))
   .toBeTruthy();
 })
})