typescript - Karma, Angular 7 och FontAwesome-problem Kan inte binda till 'icon' eftersom det inte är en känd egenskap hos 'fa-icon'

Kan inte binda till 'icon' eftersom det inte är en känd egenskap för 'fa-icon'.

När du försöker köra detta test i people.component.spec.ts

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { PeopleComponent } from "./people.component";



describe("PeopleComponent Unit Test", () => {
  let component: PeopleComponent;
  let fixture: ComponentFixture<PeopleComponent>;

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


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


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

Löparen visar detta fel:

Misslyckades: Mallparsning fel: Kan inte binda till 'icon' eftersom det inte är en känd egenskap hos 'fa-icon'.

  1. Om 'fa-icon' är en Angular-komponent och den har 'icon'-inmatning, kontrollera då att den är en del av denna modul.
  2. Om 'fa-icon' är en webbkomponent, lägg då till 'CUSTOM_ELEMENTS_SCHEMA' i '@NgModule.schemas' för denna komponent för att undertrycka detta meddelande.
  3. För att tillåta vilken egenskap som helst, lägg till 'NO_ERRORS_SCHEMA' i '@NgModule.schemas' för denna komponent. Detta är HTML:en som orsakar problemet.

Jag har försökt importera FontAwesomeModule och FaIcon på testsidan och lägga till dem i TestBed-konfigurationens imports-uttalande. Jag har försökt säkerställa att komponenten också har importerna. Ingenting verkar fungera.

Svar #1

Hittade lösningen: i configureTestingModule måste du använda declarations, providers och imports på rätt sätt. När detta gjordes som visas nedan t.ex. visades till och med appmodel-provider och styling inom Jasmine-testet.

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { PeopleComponent } from "./people.component";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
import { DisplayNamePipe } from "src/app/extensions/pipes.format.person.display-name";
import { RouterModule } from "@angular/router";
import { SSNFormatPipe } from "src/app/extensions/pipes.format.ssn";
import { AppModule } from "src/app/app.module"; 
import { RestangularModule } from "ngx-restangular";




describe("PeopleComponent", () => {
  let component: PeopleComponent;
  let fixture: ComponentFixture<PeopleComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PeopleComponent, FaIconComponent, DisplayNamePipe,   SSNFormatPipe ],
      providers: [AppModule],
      imports:[ RestangularModule.forRoot(), RouterModule.forRoot([])]
    })
      .compileComponents();
  }));


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


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

Detta lärde mig att konfigurationen av modulen måste inkludera allt som Angular 7-applikationen gör för att testet ska spegla front-end-rendering, rutter, ikoner och pipes.

Relaterade artiklar