咨询：Angular CDK Overlay未在Jest快照中显示的解决方案

针对你遇到的CDK Overlay挂载到document.body导致无法在组件快照或查询范围内捕获的问题，这里有几个实用的解决思路，不需要mock CDK Overlay：

1. 把CDK Overlay容器挂载到组件内部 #

通过OverlayContainer可以修改overlay的挂载目标，将其从body移到组件的宿主元素下，这样overlay元素就会出现在组件的DOM范围内，快照和元素查询都能覆盖到。

import { OverlayContainer } from '@angular/cdk/overlay';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component';
import { OverlayModule } from '@angular/cdk/overlay';
import { By } from '@angular/platform-browser';

describe('YourComponent', () => {
  let fixture: ComponentFixture<YourComponent>;
  let overlayContainer: OverlayContainer;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      imports: [OverlayModule], // 必须导入CDK Overlay模块
      providers: [OverlayContainer]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    overlayContainer = TestBed.inject(OverlayContainer);
    
    // 将overlay容器附加到组件宿主元素内
    fixture.nativeElement.appendChild(overlayContainer.getContainerElement());
    fixture.detectChanges();
  });

  afterEach(() => {
    // 测试后清理，避免影响其他用例
    overlayContainer.getContainerElement().remove();
  });

  it('should display and interact with overlay inputs', () => {
    // 触发显示overlay的操作
    fixture.debugElement.query(By.css('.open-overlay-btn')).triggerEventHandler('click', null);
    fixture.detectChanges();

    // 现在可以直接从组件范围内查询输入框
    const input = fixture.nativeElement.querySelector('.cdk-overlay-pane input');
    expect(input).toBeTruthy();
    
    // 执行输入操作
    input.value = 'demo content';
    input.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    // 验证业务逻辑
    expect(component.someProperty).toBe('demo content');
  });
});

2. 直接查询document.body中的Overlay元素 #

既然CDK Overlay默认挂载到body，测试时不需要局限于组件的fixture.nativeElement，直接通过document查询即可，Jest测试环境完全支持操作全局document对象。

it('should interact with overlay inputs from body', () => {
  // 触发overlay显示
  fixture.debugElement.query(By.css('.open-overlay-btn')).triggerEventHandler('click', null);
  fixture.detectChanges();

  // 从body中定位overlay内的输入框
  const overlayInput = document.querySelector('.cdk-overlay-pane input') as HTMLInputElement;
  expect(overlayInput).toBeTruthy();

  // 模拟用户输入
  overlayInput.value = 'test value';
  overlayInput.dispatchEvent(new Event('input'));
  fixture.detectChanges();

  // 验证结果
  expect(component.someProperty).toBe('test value');
});

3. 调整快照范围以包含body元素 #

如果需要快照捕获Overlay内容，只需要将快照的目标从组件nativeElement改为document.body或整个document根元素即可。

it('should capture overlay in snapshot', () => {
  // 触发overlay显示
  fixture.debugElement.query(By.css('.open-overlay-btn')).triggerEventHandler('click', null);
  fixture.detectChanges();

  // 生成包含overlay的body快照
  expect(document.body).toMatchSnapshot();
});

额外注意事项 #

• 确保测试模块中导入了OverlayModule，否则CDK Overlay无法正常初始化。
• 每个测试用例后记得清理Overlay容器，避免残留的DOM元素影响后续测试。

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