Angular17 Jest单元测试报错NG05104：app-root选择器未匹配元素

错误成因 #

• 测试组件间接依赖AppComponent：例如测试组件注入的服务/指令需要以AppComponent作为宿主，或组件模板依赖AppComponent的上下文，而Jest测试环境默认不会自动挂载AppComponent，导致找不到app-root元素。
• 测试配置未覆盖根组件上下文：若组件依赖根级宿主元素（如全局指令、服务需挂载在app-root下），但测试模块未配置对应宿主元素或模拟相关依赖。
• 组件初始化逻辑直接操作DOM：组件在ngOnInit等钩子中通过document.querySelector('app-root')获取元素，测试环境未预先创建该元素。

修复方案 #

1. 手动创建app-root元素（针对直接DOM查询场景） #

在测试的生命周期钩子中手动添加/清理app-root元素：

beforeEach(() => {
  const appRoot = document.createElement('app-root');
  document.body.appendChild(appRoot);
});

afterEach(() => {
  const appRootEl = document.querySelector('app-root');
  if (appRootEl) document.body.removeChild(appRootEl);
});

2. 隔离测试组件，移除不必要依赖 #

• 检查组件构造函数中的服务，若存在依赖AppComponent的服务，使用测试双（Test Double）模拟该服务的行为，避免依赖真实的AppComponent。
• 排查组件模板，若使用了仅在AppComponent上下文生效的指令/管道，在测试模块中声明或模拟这些依赖。

3. 配置测试模块的宿主组件 #

若组件确实需要AppComponent作为宿主，在测试模块中配置宿主组件：

await TestBed.configureTestingModule({
  declarations: [YourTestComponent, AppComponent],
}).compileComponents();

// 将测试组件挂载到AppComponent宿主中
const fixture = TestBed.createComponent(YourTestComponent);
const appRoot = document.createElement('app-root');
document.body.appendChild(appRoot);
appRoot.appendChild(fixture.nativeElement);
fixture.detectChanges();

也可通过overrideComponent指定宿主选择器：

TestBed.overrideComponent(YourTestComponent, {
  set: { host: { selector: 'app-root' } }
});

4. 验证Jest的DOM环境配置 #

确保jest.config.ts中使用jsdom作为测试环境（Angular 17适配的DOM环境）：

export default {
  preset: 'jest-preset-angular',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  // 其他配置项...
};

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