Angular2 material 'md-icon' is not a known element with Karma / Jasmine
Solution 1
Importing the MaterialModule as suggested by yurzui and creating the component after the promise is returned solved it. Thank you yurzui
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { WatchpanelComponent } from './watchpanel.component';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
describe('WatchpanelComponent', () => {
let component: WatchpanelComponent;
let fixture: ComponentFixture<WatchpanelComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ MaterialModule.forRoot() ],
// forRoot() deprecated
// in later versions ------^
declarations: [ WatchpanelComponent ] // declare the test component
})
.compileComponents().then(() => {
fixture = TestBed.createComponent(WatchpanelComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
}));
// beforeEach(() => {
// fixture = TestBed.createComponent(WatchpanelComponent);
// component = fixture.componentInstance;
// fixture.detectChanges();
// });
it('should create', () => {
expect(component).toBeTruthy();
});
});
Solution 2
Things've changed in newer versions of Angular Material since @javahaxxor's answer. I've resolved this problem with importing same modules as I do in AppModule
(I also need Forms here):
import {
MatButtonModule,
MatCardModule,
MatIconModule,
MatInputModule,
MatProgressSpinnerModule,
MatDialogModule,
MatCheckboxModule
} from '@angular/material';
// ... not important
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WelcomeComponent ],
imports: [
NoopAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatCardModule,
MatIconModule,
MatInputModule,
MatProgressSpinnerModule,
MatDialogModule,
MatCheckboxModule
],
providers: [
// ...
]
})
.compileComponents();
}));
Solution 3
md-icon is no longer available in the latest versions of Angular Material. All tags/elements are now prefixed with "mat" instead of "md".. So <md-icon>
..becomes.. <mat-icon>
![jsaddwater](https://i.stack.imgur.com/x3Wax.jpg?s=256&g=1)
Comments
-
jsaddwater about 2 years
I'm working on an Angular2 application using @angular/material 2.0.0-alpha.11-3 angular-cli 1.0.0-beta.19-3 karma 1.2.0 karma-jasmine 1.0.2
Running it works fine but a couple of the tests where the template has a button with md-icon fail with template errors:
ERROR: 'Unhandled Promise rejection:', 'Template parse errors: 'md-icon' is not a known element: 1. If 'md-icon' is an Angular component, then verify that it is part of this module. 2. If 'md-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message
My app.module.ts:
import { MaterialModule } from '@angular/material'; @NgModule({ declarations: [ AppComponent, LinearProgressIndicatorComponent, MyNewDirectiveDirective, MyNewServiceDirective, HeaderComponent, MenuComponent, WatchpanelComponent, InputComponent ], imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot(), MaterialModule.forRoot(), ], exports: [ MaterialModule ], providers: [LocalStorage], bootstrap: [AppComponent] }) export class AppModule { }
watchpanel.component.spec.ts:
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { WatchpanelComponent } from './watchpanel.component'; describe('WatchpanelComponent', () => { let component: WatchpanelComponent; let fixture: ComponentFixture<WatchpanelComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ WatchpanelComponent ] // declare the test component }) .compileComponents(); fixture = TestBed.createComponent(WatchpanelComponent); component = fixture.componentInstance; fixture.detectChanges(); })); // beforeEach(() => { // fixture = TestBed.createComponent(WatchpanelComponent); // component = fixture.componentInstance; // fixture.detectChanges(); // }); it('should create', () => { expect(component).toBeTruthy(); }); });
As I understood it @angular/material now contains the only module needed to import, MaterialModule. I tried importing the MdIconModule from @angular2-material/icon with no success. What am i doing wrong ? Thanks in advance