Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.

Question

I have a problem with an unit test in angular 5 with Jasmine and Karma.

The error is: "Can't bind to 'fruits' since it isn't a known property of 'my-component2'".

The unit test code is:

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

And these are the code of my components:

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>

It is a dummy project, can anybody help me?

Thanks :)

Answer 1

You need to add your second component when creating your testing module as that module is part of component 1. If you don't the module won't have my-component2 and the input will be invalid.

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