Angular2 测试 "Cannot find name 'HTMLElement'"
Angular2 Testing "Cannot find name 'HTMLElement'"
我正在尝试将测试引入我现有的项目,但我一直 运行 陷入同样的错误,我认为这禁止我进行 运行 测试。我得到的错误是
ERROR in .../src/app/dashboard.component.spec.ts (15,13): Cannot find name 'HTMLElement'.)
Chrome 57.0.2987 (Mac OS X 10.12.3): Executed 4 of 4 SUCCESS (7.24 secs / 6.55 secs)
我的 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,然后重新启动测试才能正确编译(我认为它会在文件更改时执行,但事实并非如此)。谢谢!
在测试项目的 tsconfig.json
中,您应该将 dom
库添加到 lib 数组:
"lib": ["es6", "dom", "es2015.iterable"],
我在连续测试时遇到了同样的问题,但没有一个 运行。测试将在初始 运行 上编译,但是当我更改任何代码时,编译将停止并出现
Cannot find name 'HTMLElement'
错误消息,我不得不执行 Ctr+C
并重新启动。
将 tsconfig.spec.json 更改为
"lib": ["es6", "dom"],
按照 PierreDuc 的建议解决了问题,我的测试套件 运行 在连续模式下。
我也打错了HTMLElement
,例如。我做到了 HtmlElement
。希望这可以帮助。
我正在尝试将测试引入我现有的项目,但我一直 运行 陷入同样的错误,我认为这禁止我进行 运行 测试。我得到的错误是
ERROR in .../src/app/dashboard.component.spec.ts (15,13): Cannot find name 'HTMLElement'.)
Chrome 57.0.2987 (Mac OS X 10.12.3): Executed 4 of 4 SUCCESS (7.24 secs / 6.55 secs)
我的 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,然后重新启动测试才能正确编译(我认为它会在文件更改时执行,但事实并非如此)。谢谢!
在测试项目的 tsconfig.json
中,您应该将 dom
库添加到 lib 数组:
"lib": ["es6", "dom", "es2015.iterable"],
我在连续测试时遇到了同样的问题,但没有一个 运行。测试将在初始 运行 上编译,但是当我更改任何代码时,编译将停止并出现
Cannot find name 'HTMLElement'
错误消息,我不得不执行 Ctr+C
并重新启动。
将 tsconfig.spec.json 更改为
"lib": ["es6", "dom"],
按照 PierreDuc 的建议解决了问题,我的测试套件 运行 在连续模式下。
我也打错了HTMLElement
,例如。我做到了 HtmlElement
。希望这可以帮助。