运行Angular单元测试提示WARN Error: Icon intersect not found如何解决

报错信息：WARN Error: Icon intersect not found when run Angular unit test

触发原因 #

• 全局图标注册未适配测试环境：日常运行项目时你在全局（App初始化阶段、核心模块等位置）注册了名为intersect的自定义图标，但单元测试运行时默认不会加载全局的图标注册逻辑，测试环境缺少对应的图标配置就会触发该警告。
• 当前测试组件存在未声明依赖：检查测试组件的模板，确认是否存在使用intersect图标的代码（例如<mat-icon svgIcon="intersect"></mat-icon>），如果测试的TestBed配置中没有引入图标注册逻辑、也没有Mock对应的图标组件，就会抛出该警告。
• 图标库Mock逻辑缺失异常处理：如果你已经在测试中Mock了图标组件/模块，但Mock逻辑没有对不存在的图标名做兼容处理，匹配到intersect时就会抛出警告。

解决思路 #

• 注册测试环境所需图标：在测试用例的beforeEach阶段，提前注册用到的intersect图标即可，以Angular Material图标为例：

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

beforeEach(() => {
  TestBed.configureTestingModule({
    // 你的其他测试配置
  });
  // 注册所需图标
  const iconRegistry = TestBed.inject(MatIconRegistry);
  const sanitizer = TestBed.inject(DomSanitizer);
  // 可以替换为你实际的图标路径，仅测试用也可以直接传入空的svg内容
  iconRegistry.addSvgIcon('intersect', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/intersect.svg'));
});

• Mock图标组件跳过检查：如果不需要测试图标相关逻辑，直接声明Mock的图标组件放入TestBed的declarations中即可，不会再触发不存在警告：

// 测试文件顶部声明Mock组件
@Component({
  selector: 'mat-icon',
  template: ''
})
class MockMatIcon {
  @Input() svgIcon: string;
  @Input() fontIcon: string;
}

// 在TestBed配置中添加
TestBed.configureTestingModule({
  declarations: [TestComponent, MockMatIcon]
  // 其他配置
})

• 全局关闭图标不存在警告：如果想要批量处理所有同类图标警告，可以在测试全局配置中覆盖图标库的警告逻辑，以Angular Material为例，可以通过Provider覆盖MatIconRegistry的警告抛出方法，跳过不存在图标的警告输出。

内容的提问来源于stack exchange，提问作者Henry Lin