ng test无法识别Angular Material组件的解决方法

这个问题我帮不少开发者排查过，核心原因就是测试模块没有正确导入对应的Angular Material组件模块，或者配置不当。下面分几种常见场景给你具体解决办法：

场景1：组件所属模块已导入Material模块，但测试模块未导入 #

Angular的测试环境是独立的，即使你的组件在主模块里已经导入了MatFormFieldModule，测试模块也必须单独导入它（以及相关依赖模块，比如常用的MatInputModule）。

打开你的组件测试文件（比如your-component.component.spec.ts），在TestBed.configureTestingModule的imports数组中添加对应的Material模块：

import { TestBed } from '@angular/core/testing';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'; // 如果用到<mat-input>必须加
import { YourComponent } from './your-component.component';

describe('YourComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [
        MatFormFieldModule,
        MatInputModule // 配套mat-input一起使用时必填
      ]
    }).compileComponents();
  });

  // 你的测试用例...
});

场景2：使用SharedModule统一管理Material模块 #

如果你的项目里用了SharedModule来统一导入和导出所有Angular Material模块，那测试模块只需要导入SharedModule即可，不用单独加每个Material模块：

import { TestBed } from '@angular/core/testing';
import { SharedModule } from '../shared/shared.module'; // 根据你的路径调整
import { YourComponent } from './your-component.component';

describe('YourComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [SharedModule]
    }).compileComponents();
  });
});

场景3：临时抑制警告（不推荐用于正常测试） #

如果只是临时想隐藏这个报错（比如快速验证其他逻辑，不关心Material组件的渲染），可以添加CUSTOM_ELEMENTS_SCHEMA到测试模块的schemas数组里。但注意：这个方法只是屏蔽错误提示，不会让Material组件正常工作，所以不推荐作为长期解决方案。

代码示例：

import { TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { YourComponent } from './your-component.component';

describe('YourComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  });
});

关键提醒 #

Angular Material组件都是标准的Angular组件，不是Web组件，所以优先用前两种方法导入对应的模块，才能让测试环境正确识别并渲染这些组件，保证测试的准确性。

内容的提问来源于stack exchange，提问作者Daniel Bezerra De Menezes