0

测试子组件时出现如下错误:

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

在测试组件时。我正在使用testing-libraryangular with 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();

  });

});

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

4

1 回答 1

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

  });

});

现在工作正常。

于 2021-09-16T10:17:38.540 回答