Javascript 我如何测试包装在ng容器中的元素是否存在用于Jasmine的Angular 6？

我试图编写一个单元测试，以查看是否存在封装在

中的元素，但是我的测试失败了，因为似乎元素是以任何方式创建的

我的代码是：

HTML

我宁愿不必将我的

包装在另一个元素中；我在网上看到过一些文章说可以这样做，但是有没有一种方法可以在没有周围物体的情况下检查角度容器中的元素呢

谢谢

从评论中

---

您的单元测试未通过，因为您正在检查

toBeNull（）

，这是错误的。相反，您应该检查以下内容

expect(debugEl.query(By.css('#login'))).not.toBeNull(); 

或

---

expect（debugEl.query（By.css（'#login'））.toBeNull（）确实失败，因为存在具有
id=“login”
的元素。你的疑问是什么？我可能不太清楚angular是如何做到的，但我认为如果
*ngIf
的结果为false，angular不会将容器中的元素添加到DOM中，因此不会存在。我在过去成功地编写了具有这种理解的测试，但区别在于if语句位于
或其他原生HTML元素中。您是对的，如果
*ngIf为false，angular不会将容器中的元素添加到DOM中，因此就不存在了。
。而
ng容器
的全部目的是消除那些只为满足条件而存在的额外
的需要<代码>ng容器

不会在dom中呈现，但如果满足条件，则会呈现其中的内容。因此，在我的单元测试中，我使用路由器对象导航到我的应用程序中名为

登录

的页面，条件是如果路由是登录，则显示

ng容器

的内容，但是我的单元测试没有通过。您的单元测试没有通过，因为您正在检查

toBeNull（）

，这是错误的。相反，您应该检查

expect（debugEl.query（By.css（'#login'））.not.toBeNull（）之类的内容

或

expect（debugEl.query（By.css（'#login'））.toBeDefined（）
it('should display the login div when on the login page', fakeAsync(inject([Router], (router: Router) => {
    router.navigate(['/login']);
    fixture.detectChanges();
    expect(debugEl.query(By.css('#login'))).toBeNull();
})));

expect(debugEl.query(By.css('#login'))).not.toBeNull(); 

expect(debugEl.query(By.css('#login'))).toBeDefined();