Question

在AppComponent中，我正在HTML代码中使用nav组件。用户界面看起来不错。服务时没有错误。当我查看该应用程序时，控制台中也没有错误。但是当我为我的项目运行Karma时，出现错误：

错误：

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>

规格：

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

您的组件可能使用了app-widget。您应该在测试中将其添加到“声明”（如果是组件）或“导入”（如果是模块）。

第二种方式是添加“ NO_ERRORS_SCHEMA”：

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

Angular 6 Karma测试'@input装饰器

1 个答案: