Angular测试中MatHeaderRow/MatRow与MockedComponent冲突问题求助

看起来你在测试Angular Material可展开表格时遇到了组件冲突问题——这通常是因为测试模块同时导入了Mock版本的Material组件和真实的Material模块，导致Angular无法确定该使用哪个组件来匹配模板里的<mat-header-row>和<mat-row>元素。

问题根源 #

你的测试代码里同时导入了MaterialMockModule（里面包含Mock的MatHeaderRow/MatRow组件）和MatTableModule（真实的Material表格模块），这两个模块都声明/提供了同名的组件，所以模板解析时就会抛出“元素匹配到多个组件”的错误。

解决方案 #

你只需要二选一：要么用Mock组件，要么用真实组件，不要同时导入两者。

方案1：使用Mock组件（推荐用于单元测试，更快更隔离）

移除测试模块中导入的MatTableModule，因为MaterialMockModule已经提供了所有需要的Mock Material组件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MaterialMockModule } from '@content-platform/unit-test-helpers';
import { MaterialAudioProgramsComponent } from './material-audio-programs.component';
import { StoreModule } from '@ngrx/store';
import { RouterTestingModule } from '@angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

describe('MaterialAudioProgramsComponent', () => {
  let component: MaterialAudioProgramsComponent;
  let fixture: ComponentFixture<MaterialAudioProgramsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MaterialAudioProgramsComponent],
      imports: [
        MaterialMockModule, // 保留Mock模块
        StoreModule.forRoot({}),
        RouterTestingModule
        // 移除MatTableModule，避免冲突
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MaterialAudioProgramsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

方案2：使用真实Material组件（适合集成测试）

如果你的测试需要真实的Material表格功能，就移除MaterialMockModule，导入组件实际依赖的所有Material模块（和MaterialAudioProgramsModule里的保持一致）：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MaterialAudioProgramsComponent } from './material-audio-programs.component';
import { StoreModule } from '@ngrx/store';
import { RouterTestingModule } from '@angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
// 导入真实的Material模块
import { MatTableModule, MatTabsModule, MatIconModule, MatProgressSpinnerModule } from '@angular/material';

describe('MaterialAudioProgramsComponent', () => {
  let component: MaterialAudioProgramsComponent;
  let fixture: ComponentFixture<MaterialAudioProgramsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MaterialAudioProgramsComponent],
      imports: [
        StoreModule.forRoot({}),
        RouterTestingModule,
        // 导入所有需要的真实Material模块
        MatProgressSpinnerModule,
        MatTableModule,
        MatTabsModule,
        MatIconModule
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MaterialAudioProgramsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

额外检查 #

确保你的MaterialMockModule确实正确Mock了所有用到的Material组件（比如MatHeaderRow、MatRow、MatTabGroup等），如果Mock不全，即使移除了冲突模块，也可能出现其他错误。

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