Javascript Angular2组件单元测试

我试图了解更多关于Angular2单元测试的内容。 目前，我无法获取组件html模板中特定元素的计数

我的组件

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'cl-header',
  templateUrl: 'cl-header.component.html',
  styleUrls: ['cl-header.component.css']
})
export class ClHeaderComponent implements OnInit {
  headerTitle: string = 'Some Title';
  constructor() {}

  ngOnInit() {
  }

}

组件html模板

<nav class="navbar navbar-default" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="#" class="fa fa-bars fa-2x"></a></li>
    <li><a href="http://localhost:91/UserHome/" class="fa fa-home fa-2x no-padding"></a></li>
  </ul>
  <div class="nav navbar-text-center">{{headerTitle}}</div>
  <a href="#" class="navbar-brand pull-right">
    <img src="app/components/cl-header/shared/logo.png" height="28px" alt="logo" />
  </a>
  <i>testtext</i>
</nav>

---

谢谢你的建议

虽然compiled.querySelector（'div'）没有抛出答案（使用Angular Cli种子和vsCode），但这确实是一个缓存问题，因为我现在能够使用compiled.querySelector（'div'）返回正确的元素计数

我想我的困惑是由于缓存引起的，因为我最初尝试querySelectorAll

---

另外，我无法将任何注释设置为答案，因此我必须将其设置为我自己回答。

不确定这是否“成功”，但它应该是

querySelectorAll（'div'）。length

。首先，确保您遵循@estus建议，因为querySelector只会返回一个没有

length

属性的结果。接下来，您是否禁用了浏览器中的缓存？开放式开发工具通常对此有所帮助。这肯定是一个缓存问题

compiled.querySelector（'div'）。length

将引发异常。您找到如何在测试中自动清除缓存的解决方案了吗？