角度模拟Maticon

Question

ComponentToTest

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

所以我有一个类似的mockMatIconComponent

@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;
}

所以在我的测试台上我有

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

但当我尝试运行这个时，我会得到模板解析错误："mat-icon"不是已知元素：错误我是不是遗漏了什么？我已经在声明中声明了MockComponent。我知道我没有导入MatIconModule，但我不想导入，因为我希望我的mock在那里。我可以覆盖我的模块，但我想尝试这种方式。有人能告诉我这里出了什么问题吗？

Answer 1

正确模拟mat模块/组件的最佳方法是使用模拟库，例如使用Angular Material组件的模拟。

然后你的测试可能看起来像：

beforeEach(() => MockBuilder(ComponentToTest, MatIconModule));
// ... tests