Angular Unit testing with Input decorator throw error

Question

here is my component which i run testing:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'shell-bread-crumbs',
    templateUrl: './shell-bread-crumbs.component.html',
    styleUrls: ['./shell-bread-crumbs.component.scss']
})
export class ShellBreadCrumbsComponent implements OnInit {

    @Input() breadCrumb;

    constructor() { }

    ngOnInit() {}

}

here is my spec file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ShellBreadCrumbsComponent } from './shell-bread-crumbs.component';

describe('ShellBreadCrumbsComponent', () => {

  let component: ShellBreadCrumbsComponent;
  let fixture: ComponentFixture<ShellBreadCrumbsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ShellBreadCrumbsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ShellBreadCrumbsComponent);
    component = fixture.componentInstance;
    component.breadCrumb = ""; //i given empty declaration,
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

But still getting an error as :

Template parse errors:
    Can't bind to 'breadCrumb' since it isn't a known property of 'bread-crumbs'.
    1. If 'bread-crumbs' is an Angular component and it has 'breadCrumb' input, then verify that it is part of this module.
    2. If 'bread-crumbs' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<bread-crumbs [ERROR ->][breadCrumb]="breadCrumb"></bread-crumbs>")

how to fix this?

Answer 1

It is because you use bread-crumbs within shell-bread-crumbs.component.html

There are two things you can do

1. Import BreadCrumbsModule or declare BreadCrumbsComponent within TestBed

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
          ShellBreadCrumbsComponent,
          BreadCrumbsComponent // if you own this component
      ],
      imports: [BreadCrumbsModule] // if you have module
    })
    .compileComponents();
}));

This way, Angular will recognize bread-crumbs. However, this may create other problems. BreadCrumbsComponent may have other dependencies and use other components that you need to declare or define. Also, you may not care about BreadCrumbsComponent for this test which brings us to second thing you can do

2. Use CUSTOM_ELEMENTS_SCHEMA so that angular will skip over elements it does not recognize. You can do it as follows

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ShellBreadCrumbsComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));