Angular测试报错：'mat-toolbar'不是已知元素的问题求助

问题根源 #

Angular组件测试依赖TestBed构建独立的测试模块，该模块不会自动继承AppModule的导入配置。即便你在AppModule中导入了MatToolbarModule，测试环境仍无法识别对应的组件。

修复方案 #

修改app.component.spec.ts文件，在TestBed.configureTestingModule的imports数组中添加所需的Material模块（包括MatToolbarModule以及模板中用到的MatButtonModule、动画模块）：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [
        MatToolbarModule,
        MatButtonModule,
        BrowserAnimationsModule
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  // 你的测试用例代码
});

补充提示 #

• 若模板中使用了其他Material组件（如mat-dialog），需同步在测试模块的imports中添加对应模块（如MatDialogModule）。
• 不要添加CUSTOM_ELEMENTS_SCHEMA来掩盖错误，这只是临时屏蔽提示，无法真正让测试环境识别Angular组件。

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