Блог

При тестировании дочернего компонента я получаю следующую ошибку:

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

при тестировании компонента. я использую testing-library для углового с. jestjs не в состоянии разобраться в проблеме.

компонент контейнера.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>
 

дочерний компонент.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 { }

}
 

ребенок.тест.спецификация:

 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();

  });

});
 

не знаю, чего мне не хватает ей при тестировании. кто-нибудь может мне помочь?

проблема связана с родительским файлом спецификаций. он ищет дочерний компонент. Я обновил свою родительскую спецификацию, например :

 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]
    });

  });

});
 

теперь это работает нормально.