Angular 6 Karma测试'@input装饰器

Question

In the AppComponent, I'm using the nav component in the HTML code. The UI looks fine. No errors when doing ng serve. and no errors in console when I look at the app. But when I ran Karma for my project, there is an error:

Error:

Failed: Template parse errors:
Can't bind to 'head' since it isn't a known property of 'app-widget'.
1. If 'app-widget' is an Angular component and it has 'head' input, then verify that it is part of this module.
2. If 'app-widget' 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. ("<app-widget [ERROR ->][head]="heading"></app-widget>

Spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeService } from './../../service/home.service';
import { MyFavoriteComponent } from './my-favorite.component';

describe('MyFavoriteComponent', () => {
  let component: MyFavoriteComponent;
  let fixture: ComponentFixture<MyFavoriteComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyFavoriteComponent ],
      providers: [{provide: HomeService}]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyFavoriteComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

TS:

import { Component, OnInit, Input } from '@angular/core';
import { HomeService } from './../../service/home.service';

@Component({
  selector: 'app-my-favorite',
  templateUrl: './my-favorite.component.html',
  styleUrls: ['./my-favorite.component.scss']
})
export class MyFavoriteComponent implements OnInit {
  heading = '';
  constructor(private homeService: HomeService) {}

   ngOnInit() {
    this.homeService.homeDataWidget().subscribe(response => {
      this.heading = response.myfavoirte;
    });

   }

}

HTML

<app-widget [head]="heading"></app-widget>

Answer 1

Your component probably use app-widget. You should add it to "declaration" (if it's component) or to "imports" (if it's module) in your test.

Second way is adding "NO_ERRORS_SCHEMA":

TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [ MyFavoriteComponent, WidgetComponent],
      providers: [{provide: HomeService}],
      schemas: [NO_ERRORS_SCHEMA]
    })