If 'app-user' is an Angular component and it has 'InwelcomeMsg' input, then verify that it is part of this module

Question

I am getting an error as follows when i test the child component:

1. If 'app-user' is an Angular component and it has 'InwelcomeMsg' input, then verify that it is part of this module.

on testing the component. i am using testing-library for angular with jestjs. not able to figure out the issue.

container component.ts:

import { Component, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-shell-user',
  templateUrl: './shell-user.component.html',
  styleUrls: ['./shell-user.component.scss']
})
export class ShellUserComponent implements OnInit {

  @Output() OutwellcomeMsg: string | undefined;

  title = "Welcome to user!!"

  constructor() { }

  ngOnInit(): void {
    this.OutwellcomeMsg = this.title;
  }

}

html:

<section>
    <app-user [InwelcomeMsg]="OutwellcomeMsg"></app-user>
</section>

child component.ts:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  @Input()
  InwelcomeMsg!: string | undefined;

  constructor() { }

  ngOnInit(): void { }

}

child.test.spec:

import { render, screen } from '@testing-library/angular';
import { UserComponent } from './user.component';

describe('UserComponent', () => {
  it('should find the paragrap text "Hi Adil"', async () => {

    await render(UserComponent, {
      declarations: [],
      componentProperties: {
        InwelcomeMsg: "Hi Adil"
      } as any
    });

    expect(await screen.findByText(/Hi Adil/i)).toBeTruthy();

  });

});

do not know what i missing her in testing. any one help me?

Answer 1

the issue is from the parent spec file. it looks for the child component. I have updated my parent spec like :

import { render } from '@testing-library/angular';
import { UserComponent } from './../../components/user/user.component';
import { ShellUserComponent } from "./shell-user.component";

describe('UserComponent', () => {
  it('parent component should render with child', async () => {
    await render(ShellUserComponent, {
      declarations: [UserComponent]
    });

  });

});

it works fine now.