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

Question

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

上渲染它

app.component.html

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

我正在编写这样的单元测试用例： app.component.spec.ts

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();
  })
});

无法正常工作。如果我从模板中删除 <app-navbar></app-navbar> ，测试将在前夕通过。我几天前才开始进行单元测试。请纠正我的错误。

2 件事我想提一下：

我没有任何 css（截至目前）。
没有 *ngIf 条件，所以 NavbarComponent 应该一直呈现。

Answer 1

删除后app-navbar

compiled.querySelector('app-navbar')

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

此处您可能想使用 toBeTruthy()。使用这个，如果你有 app-navbar 你的测试用例就会通过，如果你删除它就会失败。

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

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

How to unit test a component to check a particular component is rendered or not

jasmine

karma-jasmine

angular