我对Jasmine和Karma的angular 5单元测试有问题.

错误是:"无法绑定到'fruits',因为它不是'my-component2'的已知属性".

单元测试代码为:

src/app/components/my-component1/my-component1.组成部分规格:

import { TestBed, inject, ComponentFixture, async} from '@angular/core/testing';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';

import { Post } from '../../models/post.model';

import { MyComponent1Component } from './my-component1.component';
import { MyService1Service } from '../../services/my-service1.service';

import { HttpClientModule, HttpClient,HttpHandler } from '@angular/common/http';
import {fruit} from '../../Models/fruit';


fdescribe('MyComponent1Component', () => {
  let component: MyComponent1Component;
  let fixture: ComponentFixture<MyComponent1Component>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent1Component ],
      imports: [],
      providers: [MyService1Service, HttpClient, HttpHandler, HttpTestingController]
    })

    .compileComponents();
  }));

  beforeEach(async(() => {
    fixture = TestBed.createComponent(MyComponent1Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

以下是我的组件代码:

src/app/components/my-component1/my-component1.组成部分ts:

import { Component, OnInit } from '@angular/core';
import { MyService1Service} from '../../services/my-service1.service';
import {fruit} from '../../Models/fruit';

@Component({
  selector: 'my-component1',
  templateUrl: './my-component1.component.html',
  styleUrls: ['./my-component1.component.css']
})
export class MyComponent1Component implements OnInit {

  constructor(private _MyService1Service: MyService1Service) { }

  public fruit= new fruit();

  public fruits: fruit[];
  ngOnInit() {
    this._MyService1Service.getPost().subscribe(
        result => {
              console.log(result);
        },
        error => {
          console.log(<any>error);
        }
      );

    this.fruit.name = 'apple';
    this.fruits.push(this.fruit);
  }
}

src/app/components/my-component1/my-component1.组成部分html:

 <p>
      my-component1 works!
    </p>

    <my-component2 [fruits]=fruits></my-component2>

src/app/components/my-component2/my-component2.组成部分ts:

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

@Component({
  selector: 'my-component2',
  templateUrl: './my-component2.component.html',
  styleUrls: ['./my-component2.component.css']
})
export class MyComponent2Component implements OnInit {

  @Input() fruits: fruit[];

  constructor() { }

  ngOnInit() {
  }

}

src/app/components/my-component2/my-component2.组成部分html:

<p>
  my-component2 works!
</p>

这是一个虚拟项目,有人能帮我吗?

谢谢:)

推荐答案

创建测试模块时,需要添加第二个组件,因为该模块是组件1的一部分.如果没有,模块将没有my-component2,输入将无效.

TestBed.configureTestingModule({
      declarations: [ MyComponent1Component, MyComponent2Component ],
      imports: [],
      providers: [MyService1Service, HttpClient, HttpHandler, HttpTestingController]
    })

Angular相关问答推荐

使用多个管道时Angel 17空数据

Angular Signal只指一种类型,但这里用作值.ts(2693)''

单元测试 case 模拟store 中的行为主体

ION标签-从子对象中加载页,保留父对象的S内容

崩溃Angular项目Docker容器

在以下位置升级到Angular 16 Break Sharepoint广告:This._history.replaceState不是函数

JsPDF Autotable 将图像添加到列中出现错误:属性getElementsByTagName不存在

Router.navigate() 在功能拦截器内不起作用

需要做什么才能使 ErrorHandler 正常工作?

模块内的命名路由出口 - 路径匹配但内容未加载

个人修改 Angular CLI - 创建新应用

angular material日期 Select 器中的日期不正确

错误 TS1086:无法在 Angular 9 的环境上下文中声明访问器

相对于根目录的 SCSS 导入

在Angular 4中以'yyyy-MM-dd'格式获取当前日期

Angular2 中的providers提供者是什么意思?

Angular 应用程序中的语法错误:Unexpected token <

formGroup 需要一个 FormGroup 实例

我应该在 Angular 4+ 应用程序中 for each 组件创建一个模块吗?

如何使用 @ngrx/store 获取 State 对象的当前值?