Jasmine测试Ionic/Angular应用时Ionic Icons svg文件404错误如何解决

你可以根据测试需求选择以下两种方案：

方案一：Mock Ionic图标组件（推荐，适配单元测试场景） #

单元测试不需要实际渲染图标资源，直接Mock处理ion-icon组件即可快速消除404报错，同时提升测试运行速度：

1. 可以在*.spec.ts测试文件的TestBed.configureTestingModule配置中添加CUSTOM_ELEMENTS_SCHEMA，跳过Ionic自定义组件的识别校验：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed } from '@angular/core/testing';

describe('YourComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      // 新增这行即可
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  });
});

如果不想全局放开自定义组件校验，也可以单独Mock ion-icon组件：

@Component({
  selector: 'ion-icon',
  template: ''
})
class MockIonIconComponent {}
// 之后把MockIonIconComponent加入TestBed的declarations数组即可

方案二：真实引入图标资源（适配需要渲染图标的集成测试场景） #

如果你的测试逻辑依赖图标实际渲染，可以将Ionic图标资源加入测试资源配置：

1. 打开angular.json，找到projects -> [你的项目名] -> architect -> test -> options -> assets配置项，新增图标资源映射：

"assets": [
  "src/favicon.ico",
  "src/assets",
  // 新增下面的配置项
  {
    "glob": "**/*.svg",
    "input": "node_modules/ionicons/dist/ionicons/svg",
    "output": "./svg"
  }
]

2. 重启测试服务后配置生效，不会再出现图标404报错。

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