您好,在使用Angular 7测试我的App时遇到一些错误。我没有太多的角度经验,所以我需要您的帮助+
Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]:
StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!
测试代码如下:
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { BeerDetailsComponent } from './beer-details.component';
import {
HttpClientTestingModule,
HttpTestingController
} from '@angular/common/http/testing';
describe('BeerDetailsComponent', () => {
let component: BeerDetailsComponent;
let fixture: ComponentFixture<BeerDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
declarations: [ BeerDetailsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BeerDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create',
inject(
[HttpTestingController],
() => {
expect(component).toBeTruthy();
}
)
)
});
我真的找不到任何解决办法。
丹妮尔
答案 0 :(得分:8)
在测试期间,我也有一段时间出现此错误,这些答案都没有真正帮助我。对我来说,解决此问题的方法是同时导入RouterTestingModule和HttpClientTestingModule。
所以从本质上讲,它在what.component.spec.ts文件中看起来像这样。
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProductComponent],
imports: [RouterTestingModule, HttpClientTestingModule],
}).compileComponents();
}));
您可以从
获取进口import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";
我不知道这是否是最好的解决方案,但这对我有用。
答案 1 :(得分:6)
添加以下导入
imports: [
RouterModule.forRoot([]),
...
],
答案 2 :(得分:5)
您必须导入RouterTestingModule
imports: [
...
RouterTestingModule
...
]
答案 3 :(得分:4)
使用服务和ActivatedRoute的简单测试示例!祝你好运!
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientModule } from '@angular/common/http';
import { MyComponent } from './my.component';
import { ActivatedRoute } from '@angular/router';
import { MyService } from '../../core/services/my.service';
describe('MyComponent class test', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let teste: MyComponent;
let route: ActivatedRoute;
let myService: MyService;
beforeEach(async(() => {
teste = new MyComponent(route, myService);
TestBed.configureTestingModule({
declarations: [ MyComponent ],
imports: [
RouterTestingModule,
HttpClientModule
],
providers: [MyService]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('Checks if the class was created', () => {
expect(component).toBeTruthy();
});
});
答案 4 :(得分:1)
此问题可以通过以下方法解决:
在相应的 spec.ts 文件中,导入RouterTestingModule
import { RouterTestingModule } from '@angular/router/testing';
在同一文件中,添加 RouterTestingModule 作为导入之一
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
providers: [Service]
});
});