角度模拟 Maticon答案

【问题标题】：Angular Mocking Maticon角度模拟 Maticon
【发布时间】：2021-06-15 14:09:00
【问题描述】：

组件测试

<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 但我不想因为我希望我的模拟在那里。我可以覆盖我的模块，但我想以这种方式尝试。谁能告诉我这里出了什么问题？

【问题讨论】：

标签： angular unit-testing angular-material mat-icon

【解决方案1】：

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

那么您的测试可能如下所示：

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

// ... tests

【讨论】：