使用 Karma 在 Angular 7 中测试应用程序,我无法删除 subj 中的错误。
我已经搜索了各个地方(主要是在这里(,但解决方案要么不起作用,要么与我的情况无关。
App.component.html:
<app-header></app-header>
<router-outlet></router-outlet>
Header.component.ts:
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, EventEmitter, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.less']
})
export class HeaderComponent implements AfterViewInit, OnInit {
constructor(private location: Location, private router: Router) {
setInterval(() => {
this.now = new Date();
}, 1000);
}
...
onKeyDown(event: KeyboardEvent): void {
event.preventDefault();
if (event.which === this.KEY_ESCAPE){
if (this.router.url !== '/'){
this.location.back();
}
}
}
App.component.spec.ts:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RouterOutlet } from '@angular/router';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
HeaderComponent,
RouterOutlet
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
AppComponent should create the app
Error: StaticInjectorError(DynamicTestModule)[HeaderComponent -> Location]:
StaticInjectorError(Platform: core)[HeaderComponent -> Location]:
NullInjectorError: No provider for Location!
就我而言,我已经在使用路由器测试模块,它不应该引发此错误。我从错误的位置导入了位置,因此出现了错误。"位置"应从此处导入:
import {Location} from '@angular/common';
在导入中,您应该只像这样导入路由器测试模块:
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes(
[
{path: 'add', component: DummyComponent, pathMatch: 'full'}
]
)
],
然后你可以像这样使用位置:
it('Should navigate to / before + button click', () => {
const location: Location = TestBed.get(Location);
expect(location.path()).toBe('');
});
只是不要忘记从@angular/公共导入位置
修复了它:我需要做的就是导入RouterModule.forRoot([])
,这似乎是一个常见的错误,因为它修复了很多StaticInjectorError(DynamicTestModule)
错误。
测试期间NullInjectorError: No provider for Location!
的替代方法是导入RouterTestingModule
。
前任。 mycomponent.spec.ts:
import { RouterTestingModule } from '@angular/router/testing';
...
beforeEach(() => TestBed.configureTestingModule({
imports: [ RouterTestingModule ]
}));
你能试着import
> CommonModule
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [CommonModule]
declarations: [
AppComponent,
HeaderComponent,
RouterOutlet
],
}).compileComponents();
}));