gpt4 book ai didi

angular - 使用 Jasmine 和 Karma 对 Angular 进行单元测试,错误 :Can't bind to 'xxx' since it isn't a known property of 'xxxxxx' .

转载 作者:太空狗 更新时间:2023-10-29 16:53:13 25 4
gpt4 key购买 nike

我在使用 Jasmine 和 Karma 进行 Angular 5 单元测试时遇到问题。

错误是:“无法绑定(bind)到‘fruits’,因为它不是‘my-component2’的已知属性”。

单元测试代码为:

src/app/components/my-component1/my-component1.component.spec.ts:

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.component.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.component.html:

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

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

src/app/components/my-component2/my-component2.component.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.component.html:

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

这是一个虚拟项目,有人可以帮助我吗?

谢谢:)

最佳答案

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

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

关于angular - 使用 Jasmine 和 Karma 对 Angular 进行单元测试,错误 :Can't bind to 'xxx' since it isn't a known property of 'xxxxxx' .,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49448193/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com