Angular项目中Jasmine测试By.css始终返回null的问题

• 未触发变更检测
  组件初始化后Angular不会自动渲染模板，必须手动调用fixture.detectChanges()触发变更检测，才能让模板元素挂载到DOM中。修改测试代码：

  it('should find the <p> with fixture.debugElement.query(By.css)', () => {
    const bannerDe: DebugElement = fixture.debugElement;
    fixture.detectChanges(); // 添加变更检测触发
    const paragraphDe = bannerDe.query(By.css('p'));
    const p: HTMLElement = paragraphDe.nativeElement;
    expect(p.textContent.trim()).toEqual('banner works!');
  });
  

• 异步测试处理不当
  使用fixture.whenStable()时，需告知Jasmine这是异步测试，否则测试会在Promise回调执行前提前结束。推荐用async/await简化异步逻辑：

  it('should find the <p> with fixture.debugElement.query(By.css)', async () => {
    const fixture = TestBed.createComponent(MobileAppLinkComponent);
    fixture.detectChanges();
    await fixture.whenStable(); // 等待异步操作完成
    const bannerDe: DebugElement = fixture.debugElement;
    const paragraphDe = bannerDe.query(By.css('p'));
    const p: HTMLElement = paragraphDe.nativeElement;
    expect(p.textContent.trim()).toEqual('banner works!');
  });
  

• 组件类与模板不匹配
  注意到测试中创建的是MobileAppLinkComponent，但模板内容是banner相关的<p>标签，确认是否误用了组件类，应创建对应模板的目标组件（比如BannerComponent）。

• 元素存在条件渲染
  检查<p>标签是否被*ngIf、*ngFor等结构指令包裹，若有则需确保渲染条件为真，比如设置组件对应属性后再触发变更检测：

  it('should find the <p> with fixture.debugElement.query(By.css)', () => {
    const component = fixture.componentInstance;
    component.isBannerVisible = true; // 假设*ngIf绑定该属性
    fixture.detectChanges();
    const paragraphDe = fixture.debugElement.query(By.css('p'));
    expect(paragraphDe).not.toBeNull();
  });
  

• 选择器精度不足
  尝试使用更精确的选择器，比如利用<p>标签的title类：

  const paragraphDe = bannerDe.query(By.css('.title'));
  

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