Angular Mocking Maticon

Question

ComponentToTest

<span>test</span>
<mat-icon svgIcon='admin_configuration_detail'></mat-icon>

So I have a mockMatIconComponent like

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'mat-icon',
    template: '<span></span>',
})
export class MockMatIconComponent {
    @Input() svgIcon: any;
    @Input() fontSet: any;
    @Input() fontIcon: any;
}

So in my Testbed I have

TestBed.configureTestingModule({
      declarations: [
        MockMatIconComponent,
        ComponentToTest,
        ],
      imports: [],
      providers: [
        ],
    })

But when i try to run this I get Template parse errors: 'mat-icon' is not a known element: Error Am I missing something here? I have already declared the MockComponent in declarations. I know I am not importing MatIconModule but I dont want to as I want my mock to be there. I can override my modules but I wanted to try things this way. Can anybody tell me whats wrong here?

Answer 1

The best to mock mat modules / components properly is to use a mocking library, for example ng-mocks with Angular Material components.

Then your test could look like:

beforeEach(() => MockBuilder(ComponentToTest, MatIconModule));

// ... tests