Angular 如何对组件进行单元测试以检查是否呈现了特定组件

我有一个非常简单的自定义组件。我称之为NavbarComponent，选择器是app navbar。它是一个非常基本的静态导航栏。我正在app.component.html上渲染它：

app.component.html

它不能正常工作。如果我从模板中删除，则测试通过。几天前我刚刚开始单元测试。请纠正我的错误

我想提两件事：

我现在没有任何css。 无*ngIf条件，因此应始终呈现NavbarComponent。 删除应用程序导航栏后

实际上返回null，这不是未定义的，这就是toBeDefined检查通过的原因

在这里，您可能需要使用toBeTruthy。使用此选项，如果您有应用程序导航栏，您的测试用例将通过，如果您删除它，测试用例将失败

在JavaScript中，有六个falsy值：false、0、null、undefined和NaN。其他一切都是真实的。

---

首先，你不应该这样做，对于应用程序组件单元测试，子组件是不相关的。您应该单独测试每个组件-您应该去掉子组件。其次，这个测试所做的只是重新测试Angular团队已经测试过的内容——提供/集成组件是框架的责任，因此您无需进行测试。只测试你自己的代码。祝你好运。@RandyCasburn，你说的话现在对我更有意义了。我做错了。谢谢你。事实上，这只是我脑海中的一个随机想法，如果我忘记显示应用程序导航栏该怎么办。应该有人确保它在那里。这就是我的思考过程。请随时纠正我：-此解决方案有效。但我想我需要更多的信息。我正在浏览你共享的链接。谢谢

<app-navbar></app-navbar>
<router-outlet></router-outlet>

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';

fdescribe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent,
        NavbarComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    ...
  });

  it(`should have as title 'my-app'`, () => {
    ...
  });

  fit('should display navbar', () => {
    const fixture=TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled=fixture.debugElement.nativeElement;
    expect(compiled.querySelector('app-navbar')).toBeDefined();
  })
});

compiled.querySelector('app-navbar')