Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.
Solution 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]
})
Solution 2
For Some this might help - some times it may just be the specific module that might be missing
TestBed.configureTestingModule(
{
declarations: [TestComponent],
imports: [<Specific_module>],
}
bulbasurmsr
Updated on July 16, 2020Comments
-
bulbasurmsr almost 4 years
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 :)
-
Admin over 4 yearsDoesn't work for me. I can run the tests in Karma with Chrome. However when I switch to headless Chrome, it fails to load my app code for whatever reason.