Angular2 Karma 测试运行器未重新加载

Question

我正在浏览 Angular2 测试教程。我对 Jasmine/Karma 很陌生，所以这可能是基本的。我注意到，一旦我运行“npm 测试”，如果我进行更改，测试运行程序会尝试重新加载但出现错误：

错误 C:/dev/unittest1/src/app/banner-inline/banner-inline.component.spec.ts (12,11): 找不到名称“HTMLElement”。）

这是规范代码（几乎来自here）：

从 '@angular/core/testing' 导入 { ComponentFixture, TestBed, ComponentFixtureAutoDetect }; 从'@angular/platform-b​​rowser'导入{ By }； 从 '@angular/core' 导入 { DebugElement }；

import { BannerInlineComponent } from './banner-inline.component';

describe('BannerInlineComponent (inline template)', () => {

  let comp: BannerInlineComponent;
  let fixture: ComponentFixture<BannerInlineComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [BannerInlineComponent], // declare the test component
      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
    });

    fixture = TestBed.createComponent(BannerInlineComponent);

    comp = fixture.componentInstance; // BannerInlineComponent test instance

    // query for the title <h1> by CSS element selector
    de = fixture.debugElement.query(By.css('h1'));
    el = de.nativeElement;
  });

  it('should display original title', () => {
    expect(el.textContent).toContain(comp.title);
  });

  it('should still see original title after comp.title change', () => {
    const oldTitle = comp.title;
    comp.title = 'Test Title';
    fixture.detectChanges();
    // Displayed title is old because Angular didn't hear the change :(
    expect(el.textContent).toContain(oldTitle);
  });

  it('should display updated title after detectChanges', () => {
    comp.title = 'Test Title';
    fixture.detectChanges(); // detect changes explicitly
    expect(el.textContent).toContain(comp.title);
  });
});

如果我停止测试运​​行器并重新启动它，一切正常。为什么会出现此错误，我该如何预防？

Answer 1

我猜你应该在项目中的 tsconfig.json 中将 dom 库添加到 lib 数组中：

"lib": ["es6", "dom", "es2015.iterable"],