Angular服务测试中偶现'mat-expansion'系列元素未知警告的原因及永久解决方法

问题回顾 #

你在测试TitleService时，第一次运行测试一切正常，但后续运行时出现了关于mat-expansion-panel等Material组件的未知元素警告，且警告并非每次都会出现。

原因分析 #

核心问题在于你的测试配置中引入了和TitleService完全无关的组件和模块：

• TitleService是通过providedIn: 'root'注册的根服务，它没有依赖任何组件或Material模块。
• 你在TestBed.configureTestingModule中声明了UserPanelComponent并导入了MatExpansionModule，这会触发测试框架编译UserPanelComponent的模板。
• 警告时有时无的现象，通常和Karma的测试缓存机制有关：第一次运行时组件编译结果被缓存，未触发模板检查；后续运行缓存失效或测试框架执行了更严格的模板校验，就会抛出警告。另外，异步测试的执行顺序也可能导致这种不稳定的表现。

解决方案 #

方案1：移除无关的测试配置（推荐）

既然我们的测试目标是TitleService，完全不需要引入UserPanelComponent和MatExpansionModule。简化测试配置后，既可以消除警告，还能让测试更高效：

import { TestBed } from '@angular/core/testing';
import { TitleService } from './title.service';

describe('TitleService', () => {
  beforeEach(() => TestBed.configureTestingModule({
    // 无需任何额外声明或导入，服务是根注入且无依赖
  }));

  it('should be created', () => {
    // Angular 9+ 推荐使用 inject 替代 get 方法
    const service: TitleService = TestBed.inject(TitleService);
    expect(service).toBeTruthy();
  });

  // 额外补充测试服务的核心功能（setValue/getValue）
  it('should correctly set and retrieve the title value', () => {
    const service: TitleService = TestBed.inject(TitleService);
    
    // 测试初始值
    expect(service.getValue()).toBe('shiny beautiful string');
    
    // 测试setValue方法
    const testTitle = 'My New Test Title';
    service.setValue(testTitle);
    expect(service.getValue()).toBe(testTitle);
  });
});

方案2：添加Schema忽略未知元素（不推荐，仅当必须保留组件时使用）

如果你因为某些原因必须在测试配置中保留UserPanelComponent，可以添加NO_ERRORS_SCHEMA来让Angular忽略模板中的未知元素警告：

import { TestBed, NO_ERRORS_SCHEMA } from '@angular/core/testing';
import { UserPanelComponent } from '../layout/user-panel/user-panel.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { TitleService } from './title.service';

describe('TitleService', () => {
  beforeEach(() => TestBed.configureTestingModule({
    declarations: [UserPanelComponent],
    imports: [MatExpansionModule],
    schemas: [NO_ERRORS_SCHEMA] // 添加此Schema忽略未知元素错误
  }));

  it('should be created', () => {
    const service: TitleService = TestBed.inject(TitleService);
    expect(service).toBeTruthy();
  });
});

注意：NO_ERRORS_SCHEMA会屏蔽所有模板错误，可能掩盖真正的问题，所以仅在必要时使用，优先推荐方案1。

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