title: Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.
body: <p>I have a problem with an unit test in angular 5 with Jasmine and Karma.</p>
  
  <p>The error is: "Can't bind to 'fruits' since it isn't a known property of 'my-component2'".</p>
  
  <p>The unit test code is:</p>
  
  <p>src/app/components/my-component1/my-component1.component.spec.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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', () =&gt; {
    let component: MyComponent1Component;
    let fixture: ComponentFixture&lt;MyComponent1Component&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ MyComponent1Component ],
        imports: [],
        providers: [MyService1Service, HttpClient, HttpHandler, HttpTestingController]
      })
  
      .compileComponents();
    }));
  
    beforeEach(async(() =&gt; {
      fixture = TestBed.createComponent(MyComponent1Component);
      component = fixture.componentInstance;
      fixture.detectChanges();
    }));
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>And these are the code of my components:</p>
  
  <p>src/app/components/my-component1/my-component1.component.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
                console.log(result);
          },
          error =&gt; {
            console.log(&lt;any&gt;error);
          }
        );
  
      this.fruit.name = 'apple';
      this.fruits.push(this.fruit);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>src/app/components/my-component1/my-component1.component.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;p&gt;
        my-component1 works!
      &lt;/p&gt;
  
      &lt;my-component2 [fruits]=fruits&gt;&lt;/my-component2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>src/app/components/my-component2/my-component2.component.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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() {
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>src/app/components/my-component2/my-component2.component.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    my-component2 works!
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is a dummy project, can anybody help me?</p>
  
  <p>Thanks :)</p>