如果“app-user”是一个 Angular 组件并且它有“InwelcomeMsg”输入，那么验证它是这个模块的一部分答案

【问题标题】：If 'app-user' is an Angular component and it has 'InwelcomeMsg' input, then verify that it is part of this module如果“app-user”是一个 Angular 组件并且它有“InwelcomeMsg”输入，那么验证它是这个模块的一部分
【发布时间】：2021-11-11 04:50:26
【问题描述】：

我在测试子组件时遇到如下错误：

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 { }

}

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

  });

});

不知道我在测试中想念她什么。有人帮帮我吗？

【问题讨论】：

标签： angular testing-library angular-testing-library angular-jest

【解决方案1】：

问题来自父规范文件。它寻找子组件。我已经更新了我的父规范：

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

  });

});

现在可以正常使用了。

【讨论】：