Karma测试含FontAwesome品牌图标组件时控制台报错求助

你遇到的问题很常见——虽然应用运行时图标正常显示，但测试环境下因为没有注册图标定义，导致FontAwesome抛出找不到图标的警告。这是因为测试模块是独立于你的应用主模块的，不会自动继承主模块里的图标注册配置。

针对你使用的@fortawesome/angular-fontawesome@0.4.0版本，按照以下步骤可以消除这些报错：

步骤1：导入所需图标和图标库服务 #

在你的组件测试文件（比如your-component.component.spec.ts）顶部，导入需要的品牌图标以及FaIconLibrary服务：

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { FaBlogger, FaTwitter, FaLinkedin, FaGit } from '@fortawesome/free-brands-svg-icons';

步骤2：在测试配置中注册图标 #

在测试的beforeEach块里，获取FaIconLibrary实例并注册你组件中用到的图标：

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let library: FaIconLibrary;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [FontAwesomeModule],
      providers: [FaIconLibrary] // 提供图标库服务
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    // 获取图标库实例
    library = TestBed.inject(FaIconLibrary);
    // 逐个注册组件中用到的图标
    library.addIcons(FaBlogger, FaTwitter, FaLinkedin, FaGit);
    // 如果你想一次性注册所有品牌图标，也可以用：
    // import { fab } from '@fortawesome/free-brands-svg-icons';
    // library.addIconPacks(fab);
    
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  // 你的测试用例...
});

为什么这样有效？ #

在你的应用主模块中，你大概率已经通过FaIconLibrary注册了这些图标，所以应用运行时能正常找到。但测试模块是一个独立的隔离环境，不会复用主模块的配置，因此需要在测试中单独注册所需的图标定义，让FontAwesome在测试渲染时能找到对应的图标数据。

这样修改后，测试运行时就不会再出现Could not find icon的报错了，同时测试也能正常通过。

内容的提问来源于stack exchange，提问作者Saurabh Sharma