使用 Jasmine 和 Karma 对 Angular 进行单元测试，错误：无法绑定到“xxx”，因为它不是“xxxxxx”的已知属性。答案

【问题标题】：Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.使用 Jasmine 和 Karma 对 Angular 进行单元测试，错误：无法绑定到“xxx”，因为它不是“xxxxxx”的已知属性。
【发布时间】：2018-09-02 01:03:12
【问题描述】：

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

错误是：“无法绑定到 '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>

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

谢谢:)

【问题讨论】：

标签： angular karma-jasmine

【解决方案1】：

对于某些人来说，这可能会有所帮助 - 有时它可能只是可能缺少的特定模块

TestBed.configureTestingModule(
{
declarations: [TestComponent],
imports: [<Specific_module>],
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

对我不起作用。我可以使用 Chrome 在 Karma 中运行测试。但是，当我切换到无头 Chrome 时，无论出于何种原因，它都无法加载我的应用代码。