Angular 混合应用程序测试“无法读取 null 的属性‘nativeElement’”

Posted 2023-02-19

【中文标题】Angular 混合应用程序测试“无法读取 null 的属性‘nativeElement’”

【英文标题】：Angular Hybrid App Test "Cannot read property 'nativeElement' of null"

【发布时间】：2019-10-14 08:08:44

【问题描述】：

我有一个简单的测试：

it ('should be able to navigate to add program', fakeAsync(() => 
  let href = fixture.debugElement.query(By.css('.add-program-btn'));
  let link = href.nativeElement.getAttribute('href');
  expect(link).toEqual('/program/new');
));

并不断收到错误：

TypeError: Cannot read property 'nativeElement' of null

我尝试将tick() 与20000 一起使用，并添加fixture.detectChanges()，但没有任何效果。另一项检查是否单击按钮和调用的函数的测试具有相同的错误。是不是找不到元素？

这个测试使用的所有东西都在 Angular 中，所以我不认为这是因为它是一个混合应用程序。

提前致谢。

【问题讨论】：

试试console.log(fixture.debugElement.nativeElement.innerhtml)看看HTML是什么样子的。

好的，谢谢。似乎问题的根源是我在父容器中的ngIf。那么现在我该怎么办，将 ngIf 设置为 true 以便正确的 HTML 在 DOM 中？

但是，现在我得到了TypeError: Cannot read property 'length' of undefined

【参考方案1】：

当在模板中使用*ngIf 并且它的表达式计算为假值时会发生这种情况。您应该为组件设置适当的输入，以便*ngIf 可以评估为真；

这里是一些示例代码：

it ('should be able to navigate to add program', async(() => 
  const component = fixture.componentInstance;

  // Set particular input so that ngIf makes your href visible to true
  component.inputName = true;

  // run change detection, updated input value should get used
  fixture.detectChanges();

  // in some cases you may want for things to stabilize
  await fixture.whenStable();

  // For debugging prupose, you may want to log innerHTML
  console.log(fixture.debugElement.nativeElement.innerHTML)

  // Rest of the test
  let href = fixture.debugElement.query(By.css('.add-program-btn'));
  let link = href.nativeElement.getAttribute('href');

  expect(link).toEqual('/program/new');
));