Problem with Antdesign icons when testing Angular application

Question

The component I am testing uses Ant Design icons, and when running Karma tests with the 'npm run test' command the following error occurs:

An error was thrown in afterall error properties: Object({ longStack: 'Error: [@ant-design/icons-angular]:the icon user-o does not exist or is not Registered.

The spec code looks like this:

import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BetboxService } from './../services/betbox.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      imports: [
        FormsModule, 
        ReactiveFormsModule,
        NgZorroAntdModule,
        HttpClientModule
      ],
      providers: [
        BetboxService
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});```

Answer 1

Solved, but for those who have the same problem follows the solution:

I added the Imports:

import { Nziconmodule } from 'ng-Zorro-antd/icon'; import { Icondefinition } from '@ant-design/icons-angular';

and created the variable with an icon array that I use in the component:

Let icons: Icondefinition[] = [Eyeinvisibleoutline, Eyeoutline, Useroutline, Lockoutline];

and in Testbed I made the change in the icon module leaving so:

Nziconmodule.forRoot(icons),

import { EyeInvisibleOutline, EyeOutline, UserOutline, LockOutline } from '@ant-design/icons-angular/icons';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BetboxService } from './../services/betbox.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzMessageModule } from 'ng-zorro-antd/message';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { IconDefinition } from '@ant-design/icons-angular';
import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let icons: IconDefinition[] = [EyeInvisibleOutline, EyeOutline, UserOutline, LockOutline];

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      imports: [
        FormsModule, 
        ReactiveFormsModule,
        NzFormModule,
        NzIconModule,
        NzButtonModule,
        NzInputModule,
        NzGridModule,
        NzMessageModule,
        NzIconModule.forRoot(icons),
        HttpClientModule
      ],
      providers: [
        BetboxService
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});