Warnings related to icons during unit test execution (Ionic v8.4.3)

Hi guys, I’m using Ionic 8.4.3 in an Angular 17 application. I have an object with all the icons we use in the application and another with some custom icons:

export const CUSTOM_ICONS: Record<string, string> = {
  'custom-edit': 'assets/icons/edit.svg',
  'custom-device': 'assets/icons/device.svg',
  'custom-device-outline': 'assets/icons/device-outline.svg',
};

export const IONICONS: Record<string, string> = {
  add,
  addCircle,
  addCircleOutline,
  addOutline,
  warning,
  warningOutline,
};

And both are registered in the AppComponent as follows:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
})
export class AppComponent {
  constructor() {
    addIcons({
      ...IONICONS,
      ...CUSTOM_ICONS,
    });
  }
}

And for testing, I created a function that mocks all the icons:

// Minimum and valid SVG for testing
const MOCK_MINIMAL_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/>";

export function mockIonicons(): void {
  const mockIcons: Record<string, string> = {};

  Object.keys(icons).forEach(key => {
    const formattedKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
    mockIcons[formattedKey] = MOCK_MINIMAL_SVG;
  });

  Object.keys(CUSTOM_IONIC_ICONS).forEach(iconName => {
    mockIcons[iconName] = MOCK_MINIMAL_SVG;
  });

  addIcons(mockIcons);
}

This function is executed in the test.ts file:

// Mock Ionic icons that generate 404 warnings during test execution
mockIonicons();

// Initialize the Angular testing environment
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

Before updating the Ionic version, this was working (I was using version 6). Is there any way to suppress these warnings?

1 post - 1 participant

Read full topic