I'm trying to introduce testing into my existing project, but I keep running into the same error, which I think is prohibiting me from running the tests. The error I get is
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)
My dashboard.component.spec.ts looks like this:
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));
});
I have searched all around for that error message, but I can't seem to find it anywhere. Also, the last test should fail, but I don't think it even compiles due to this error. Any clues as to what is wrong? I initially thought it would be an import that I was missing, but I can't see anyone else importing HTMLElements. Thanks!
Edit: My tsconfig.json looks like this:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es6",
"dom",
"es2015.iterable"
]
}
}
Edit 2: I actually had to Ctrl+C, and restart the test for it to compile correctly (I thought it would do it upon change of files, but it didn't). Thank you!
在测试项目的tsconfig.json
,您应该将dom
库添加到lib数组中:
"lib": ["es6", "dom", "es2015.iterable"],
I also typed HTMLElement
wrong, ex. I did HtmlElement
. hope this helps.
I had the same problem when continuous testing but not with a single run. The test would compile on the initial run but when I changed any code then the compilation would halt with the
Cannot find name 'HTMLElement'
error message and I had to do a Ctr+C
and restart.
Changing tsconfig.spec.json to
"lib": ["es6", "dom"],
as suggested by PierreDuc cured the problem and my test suites run in continuous mode.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.