ng-mocks配置引发NG0300多组件匹配错误，单元测试失败求解释

NG0300错误本质 #

NG0300是Angular的组件匹配冲突错误：当Angular试图渲染某个DOM标签时，发现多个组件的选择器完全匹配该标签，无法确定使用哪个组件进行渲染，因此抛出该错误。

你的测试代码导致冲突的具体原因 #

从你提供的测试配置来看，核心问题出在MockComponents的使用与测试环境中已存在的真实组件冲突：

• MatIcon冲突：你通过MockComponents(MatIcon)创建了一个选择器为mat-icon的mock组件，但你的测试环境中（可能是ContextViewerComponent自身导入了MatIconModule，或者TestBed隐式引入了相关模块）已经存在真实的MatIcon组件。两者选择器完全一致，导致<mat-icon>标签匹配到两个组件。
• app-progress-button冲突：你的测试模块中同时存在真实的ProgressButtonComponent（可能通过组件依赖导入）和它的mock版本，两者选择器都是app-progress-button，引发匹配冲突。
• button冲突：大概率是以下两种情况之一：
  1. 你自定义了选择器为button的组件，同时原生<button>元素被Angular的组件扫描逻辑误判为可匹配的组件；
  2. 测试环境中同时加载了多个选择器为button的组件（比如Angular Material的MatButton和你自己的自定义button组件）。

解决方向 #

1. 确保选择器唯一：测试模块中每个标签选择器只能对应一个组件（真实或mock）：
   • 如果使用mock组件，就不要导入包含对应真实组件的模块，或者在测试中移除真实组件的声明。
   • 检查ContextViewerComponent的imports元数据，若导入了MatIconModule等模块，在测试时需用NO_ERRORS_SCHEMA忽略未声明的组件，或替换为mock模块。
2. 规范自定义组件选择器：避免将自定义组件的选择器设为原生HTML标签名（比如button），防止与原生元素冲突。
3. 使用ng-mocks的MockBuilder简化配置：如果使用的是ng-mocks库，推荐用MockBuilder(ContextViewerComponent, ItsModule)自动替换依赖组件为mock，避免手动声明mock导致的冲突。

内容的提问来源于stack exchange，提问作者Rebai Ahmed