Angular 14：Jest测试ngFor面包屑组件的元素与routerLink问题

核心问题分析 #

• 直接原因：测试代码中设置的面包屑项active为true，组件逻辑会渲染<span>替代<a>，自然无法获取到<a>元素。
• 潜在生命周期问题：*ngFor循环渲染的元素需要等待Angular完成变更检测后才会出现在DOM中，若提前查询会返回null。

解决方案 #

1. 修正测试数据的active属性
   将测试用的面包屑项active设为false，确保组件渲染<a>标签：

   // 示例测试数据调整
   const testBreadcrumbs = [
     { label: '首页', routerLink: '/', active: false },
     { label: '分类', routerLink: '/category', active: false }
   ];
   

2. 确保变更检测完成后查询DOM
   在测试中调用fixture.detectChanges()触发变更检测，若涉及异步渲染（比如数据从服务获取），还需使用async/await或fakeAsync/tick：

   // 同步场景
   component.breadcrumbs = testBreadcrumbs;
   fixture.detectChanges(); // 触发变更检测，渲染ngFor内容
   const linkElement = fixture.nativeElement.querySelector('a');
   expect(linkElement).not.toBeNull();
   expect(linkElement.getAttribute('routerLink')).toBe('/');
   
   // 异步场景（若数据是异步加载）
   it('should render routerLink in a tag', fakeAsync(() => {
     component.breadcrumbs = testBreadcrumbs;
     fixture.detectChanges();
     tick(); // 模拟时间流逝，完成异步操作
     fixture.detectChanges(); // 再次触发变更检测
     const linkElement = fixture.nativeElement.querySelector('a');
     expect(linkElement).not.toBeNull();
   }));
   

3. 正确选择查询方式
   优先使用Angular测试工具提供的fixture.nativeElement，或借助By.css选择器更精准查询：

   import { By } from '@angular/platform-browser';
   
   // 使用By.css查询
   const linkDebugElement = fixture.debugElement.query(By.css('a'));
   expect(linkDebugElement).not.toBeNull();
   expect(linkDebugElement.attributes['routerLink']).toBe('/');
   

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