Skip to content

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

@Thyregod

Description

@Thyregod

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions