Angular Material单元测试中querySelector始终返回null问题排查

问题根源分析 #

你的问题核心有三个关键点：

1. Transloco异步渲染：*transloco是结构型指令，需要等待翻译资源加载完成后才会渲染内部的mat-card内容。单次fixture.detectChanges()触发时，翻译可能还未加载完成，导致mat-card内部元素尚未渲染到DOM中。
2. 测试依赖缺失：如果测试模块没有正确导入MatCardModule，Angular无法编译mat-card组件，内部DOM结构会不完整甚至无法渲染。
3. 选择器脆弱性：依赖DOM层级的选择器（如div div mat-card mat-card-title div span）很容易因为DOM结构微小变化失效，可靠性极低。

分步解决方案 #

1. 完善测试模块的依赖导入 #

确保在component.spec.ts的测试配置中，导入MatCardModule和Transloco的测试支持模块：

import { MatCardModule } from '@angular/material/card';
import { TranslocoTestingModule } from '@ngneat/transloco';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [YourComponent],
    imports: [
      MatCardModule, // 必须导入Material Card模块
      TranslocoTestingModule.forRoot({
        langs: {
          en: { companyPage: { form: { title: 'Test Title' } } } // 提供同步的测试翻译
        },
        defaultLang: 'en'
      })
    ]
  }).compileComponents();
});

2. 等待异步翻译完成再检测DOM #

使用Angular测试的fakeAsync和tick来处理异步操作，确保Transloco完成渲染：

it('should have a title', fakeAsync(() => {
  fixture.detectChanges(); // 触发初始变更检测
  tick(); // 等待所有异步操作完成（包括Transloco加载）
  fixture.detectChanges(); // 再次触发变更检测，更新DOM

  const compiled = fixture.debugElement.nativeElement as HTMLElement;
  // 使用更可靠的选择器
  const testSpan = compiled.querySelector('#testing span');
  expect(testSpan?.textContent).toContain('Testing');
}));

3. 使用可靠的选择器替代层级选择器 #

直接使用元素的id或class选择器，避免依赖DOM层级：

• 通过ID选择：#testing span
• 通过类选择：.testing span
• 甚至可以直接获取元素：compiled.getElementById('testing')?.querySelector('span')

额外排查点 #

如果上述方案无效，检查以下内容：

• 确认*transloco的scope: 'companyPage'对应的翻译文件确实存在，或者测试环境中已提供该scope的翻译。
• 检查mat-card是否有其他条件渲染指令（如*ngIf），导致元素未被渲染。

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