Karma, Angular 7, & FontAwesome issue Can't bind to 'icon' since it isn't a known property of 'fa-icon'

Question

Can't bind to 'icon' since it isn't a known property of 'fa-icon'.

When trying to run this test in 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();
  });
  ;
}) 

The runner shows this error:

Failed: Template parse errors: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.

1. If 'fa-icon' is an Angular component and it has 'icon' input, then
   verify that it is part of this module.
2. If 'fa-icon' 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. This is the HTML causing the issue.

I've tried to import FontAwesomeModule and FaIcon on test side and add to TestBed configuration's imports statement. I've tried to ensure the component side has the imports too. Nothing seems to work.

Answer 1

Found the solution: in the configureTestingModule, you must use declarations, providers and imports correctly. When this was done as shown below e.g. the appmodel provider even the styling showed up within the Jasmine test.

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();
  });
  ;
}) 

This taught me that the Configuration of the module must include everything the Angular 7 application does in order for the test to mirror the front-end rendering, routes, Icons, and Pipes.