Angular2测试“找不到名称'HTMLElement'”答案

【问题标题】：Angular2 Testing "Cannot find name 'HTMLElement'"Angular2测试“找不到名称'HTMLElement'”
【发布时间】：2017-03-20 09:18:41
【问题描述】：

我正在尝试在我现有的项目中引入测试，但我一直遇到同样的错误，我认为这会阻止我运行测试。我得到的错误是

.../src/app/dashboard.component.spec.ts (15,13) 中的错误：找不到名称“HTMLElement”。）

Chrome 57.0.2987 (Mac OS X 10.12.3)：执行 4 次成功 4 次（7.24 秒 / 6.55 秒）

我的 dashboard.component.spec.ts 看起来像这样：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { DashboardComponent } from './dashboard.component';
import { ExchangeService } from './exchange.service';

describe('DashboardComponent (templateUrl)', () => {

    let comp: DashboardComponent;
    let fixture: ComponentFixture<DashboardComponent>;

    let spy: jasmine.Spy;
    let de: DebugElement;
    let el: HTMLElement; // how does this work...?
    let exchangeService: ExchangeService; // the actual injected service

    const testExchange = 'New York Stock Exchange';

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ DashboardComponent ],
            providers: [ ExchangeService ],
        })
        .compileComponents();
    }))


    beforeEach(() => {

        fixture = TestBed.createComponent(DashboardComponent);
        comp = fixture.componentInstance; // DashboardComponent test componentInstance

        // ClockService actually injected into the component
        exchangeService = fixture.debugElement.injector.get(ExchangeService);

        // Setup spy on the `getExchanges` method
        spy = spyOn(exchangeService, 'getExchanges')
            .and.returnValue(Promise.resolve(testExchange));
        // query for the title <h1> by CSS element selector
        
        de = fixture.debugElement.query(By.css('.exchange'));
        el = de.nativeElement;
    });

    it('should not show exchange before OnInit', () => {
        expect(el.textContent).toBe('', 'nothing displayed');
        expect(spy.calls.any()).toBe(false, 'getExchanges not yet called');
    });

    it('true is true', () => expect(false).toBe(true));
});

我已经四处搜索该错误消息，但我似乎无法在任何地方找到它。此外，最后一个测试应该失败，但我认为它甚至不会因为这个错误而编译。关于什么是错的任何线索？我最初认为这将是我缺少的导入，但我看不到其他任何人导入 HTMLElements。谢谢！

编辑： 我的 tsconfig.json 看起来像这样：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "es6",
      "dom",
      "es2015.iterable"
    ]
  }
}

编辑 2： 实际上，我必须按 Ctrl+C，然后重新启动测试才能正确编译（我认为它会在更改文件时执行此操作，但事实并非如此）。谢谢！

【问题讨论】：

标签： angular jasmine karma-jasmine angular2-testing

【解决方案1】：

在您的测试项目中的tsconfig.json 中，您应该将dom 库添加到lib 数组中：

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

【讨论】：

我的 tsconfig.json 有："lib": ["es2016", "dom"]。还有 tsconfig.app.json 和 tsconfig.spec.json。这些也应该被编辑吗？
@Christian 尝试更改 .spec.json 并没有什么坏处 :)

【解决方案2】：

我也打错了HTMLElement，例如。我做了HtmlElement。希望这可以帮助。

【讨论】：

你并不孤单：|
那是我生命中的两个小时，我再也回不来了！大声笑...谢谢！

【解决方案3】：

我在连续测试时遇到了同样的问题，但在单次运行时没有。测试将在初始运行时编译，但是当我更改任何代码时，编译将停止并显示

Cannot find name 'HTMLElement'

错误消息，我必须执行 Ctr+C 并重新启动。
将 tsconfig.spec.json 更改为

"lib": ["es6", "dom"],

按照 PierreDuc 的建议解决了问题，我的测试套件以连续模式运行。

【讨论】：