Angular 15+Jest测试：如何获取ngIf下图片的src值？

针对你遇到的*ngIf容器内使用[ngSrc]的图片测试时无法获取到最终src的问题，以下是几个可行的解决方法：

核心原因 #

[ngSrc]是Angular 14+引入的新特性，它内部会异步处理URL解析、安全校验等逻辑，比传统的src属性多了异步处理步骤，所以常规的变更检测和异步等待方法需要调整。另外，ng-reflect-ng-src是调试用属性，会截断长URL，绝对不要依赖它做测试断言。

解决方法 #

方法1：使用waitForAsync + whenStable + 二次变更检测 #

在设置好组件数据后，先触发一次变更检测，等待Angular完成所有异步任务后，再触发一次变更检测确保ngSrc的处理结果同步到DOM：

it('should render hero image with correct src', waitForAsync(() => {
  // 初始化组件的hero数据
  component.hero = { hero_image: 'https://your-domain.com/hero-image.jpg' };
  // 第一次触发变更检测，让*ngIf生效并开始处理ngSrc
  fixture.detectChanges();

  fixture.whenStable().then(() => {
    // 第二次触发变更检测，确保ngSrc处理后的src同步到DOM
    fixture.detectChanges();
    const image: HTMLImageElement = fixture.debugElement.query(By.css('.hero--broadband')).nativeElement;
    // 注意：image.src会返回完整的绝对URL，所以用toContain断言更稳妥
    expect(image.src).toContain('https://your-domain.com/hero-image.jpg');
  });
}));

方法2：使用fakeAsync + flush + 二次变更检测 #

如果喜欢用fakeAsync测试，需要用flush()替代tick()，因为ngSrc的异步操作属于微任务队列，flush()会清空所有微任务，确保ngSrc处理完成：

it('should render hero image with correct src', fakeAsync(() => {
  component.hero = { hero_image: 'https://your-domain.com/hero-image.jpg' };
  fixture.detectChanges();
  
  // 清空所有异步任务，包括ngSrc的URL处理
  flush();
  // 再次触发变更检测同步DOM
  fixture.detectChanges();

  const image: HTMLImageElement = fixture.debugElement.query(By.css('.hero--broadband')).nativeElement;
  expect(image.src).toContain('https://your-domain.com/hero-image.jpg');
}));

额外注意：异步获取hero数据的情况 #

如果hero数据是通过服务异步获取的，需要先mock服务的返回值，再按上述流程处理：

beforeEach(() => {
  const heroService = TestBed.inject(HeroService);
  // mock服务返回预设的hero数据
  spyOn(heroService, 'getHero').and.returnValue(of({ hero_image: 'https://your-domain.com/hero-image.jpg' }));
});

it('should render hero image after async data load', waitForAsync(() => {
  fixture.detectChanges(); // 触发组件初始化，调用服务
  
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    const image: HTMLImageElement = fixture.debugElement.query(By.css('.hero--broadband')).nativeElement;
    expect(image.src).toContain('https://your-domain.com/hero-image.jpg');
  });
}));

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