testing-library/angular-testing-library

How to test components with <ng-container *ngComponentOutlet="..." />

Closed this issue · 1 comments

Hi

I'm trying to write a test for a component that renders a child component through ngComponentOutlet.
I however meet an error when doing so

Error:
image

How to reproduce:

import { render, screen } from '@testing-library/angular';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'child-component',
  standalone: true,
  template: 'child component',
})
class ChildComponent {}

@Component({
  selector: 'demo-component',
  standalone: true,
  imports: [CommonModule, ChildComponent],
  template: ` <ng-container *ngComponentOutlet="childComponent" /> `,
})
class DemoComponent {
  childComponent = ChildComponent;
}

describe(DemoComponent.name, () => {
  it('should render child component', async () => {
    await render(`<demo-component [childComponent]="childComponent" /> `, {
      imports: [DemoComponent, ChildComponent],
    });

    const child = screen.getByText('child component');

    expect(child).toBeVisible();
  });
});

Question
Can you see what I'm doing wrong? 😃
I would expect the child component to render and the test to pass.

Apparently it had to do with a customisation we had in our testing setup.
Sorry for the inconvenience.