如何解决使用Jasmine进行角度单元测试-错误:请添加@NgModule批注
我正在尝试为使用两种服务和一种形式的Angular组件编写Jasmine单元测试(使用Karma)。有关测试的教程(like this one from the Angular Docs)仅展示了如何使用一项服务来测试组件,而我却无法使它与更复杂的组件一起工作:
我的组件:user-login.component.ts:
该组件具有一个登录表单,用户可以在其中输入其凭据。 OnSubmit
我将提供的凭据发送到身份验证服务,该服务处理对我的API的http请求。如果来自API的http响应的状态为200,它将包含一个登录令牌(JWT),我将其与另一个名为TokenStorageService的服务一起存储:
import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,Validators } from '@angular/forms';
import { TokenStorageService } from '../../../_services/token-storage.service';
import { AuthenticationService } from '../../../_services/authentication.service';
import { AuthRequest } from '../../../_models/authRequest';
@Component({
selector: 'app-user-login',templateUrl: './user-login.component.html',styleUrls: ['./user-login.component.scss']
})
export class UserLoginComponent implements OnInit {
loginForm: FormGroup;
constructor(private formBuilder: FormBuilder,private tokenStorage: TokenStorageService,private authService: AuthenticationService) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['',Validators.compose([Validators.required])],password: ['',Validators.required]
});
}
onSubmit() {
this.authService.login({
userName: this.loginForm.controls.username.value,password: this.loginForm.controls.password.value
})
.subscribe(data => {
if (data.status === 200) {
this.tokenStorage.saveToken(data.body)
console.log("SUCCESS: logged in")
}
}
});
}
}
我的测试:user-login.component.spec.ts:
因此,我了解到我在构造函数中提供的三项内容(FormBuilder
,TokenStorageService
和AuthenticationService
)也必须在我的TestBed
中提供。而且由于我并不是真的想为单元测试注入服务,所以我改用了Stub Services。所以我这样做了:
TestBed.configureTestingModule({
imports: [{HttpClientTestingModule}],providers: [{provide: FormBuilder},{ provide: TokenStorageService,useValue: tokenStorageServiceStub },{ provide: AuthenticationService,useValue: authenticationServiceStub }
整个测试如下:
import { ComponentFixture,TestBed } from '@angular/core/testing';
import { UserLoginComponent } from './user-login.component';
import { FormBuilder } from '@angular/forms';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TokenStorageService } from 'src/app/_services/token-storage.service';
import { AuthenticationService } from 'src/app/_services/authentication.service';
describe('UserLoginComponent',() => {
let component: UserLoginComponent;
let fixture: ComponentFixture<UserLoginComponent>;
let tokenStorageServiceStub: Partial<TokenStorageService>;
let authenticationServiceStub: Partial<AuthenticationService>;
// let tokenStorageService;
// let authenticationService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [{HttpClientTestingModule}],useValue: authenticationServiceStub } ],declarations: [ UserLoginComponent ]
})
fixture = TestBed.createComponent(UserLoginComponent);
component = fixture.componentInstance;
// tokenStorageService = TestBed.inject(TokenStorageService);
// authenticationService = TestBed.inject(AuthenticationService);
fixture.detectChanges();
});
it('should create',() => {
expect(component).toBeTruthy();
});
});
我评论了4行,因为我认为它们是错误的,但是在the Angular Docs example中,他们也注入了真实的服务,即使他们强硬地说他们不想在测试中使用真实的服务。我不了解“文档”示例中的那一部分?
但是无论哪种方式,我都会不断收到此错误消息:
由于该错误说明了@NgModule
的某些问题,我认为这可能与我的app.module.ts
文件有关?这是我的app.module.ts
:
@NgModule({
declarations: [
AppComponent,SidebarComponent,UsersComponent,DetailsComponent,ProductsComponent,UploadFileComponent,GoogleMapsComponent,AddUserComponent,ProductFormComponent,UserLoginComponent,EditUserComponent,ProductDetailsComponent,MessagesComponent,MessageDetailsComponent,ChatComponent,UploadMultipleFilesComponent,InfoWindowProductOverviewComponent,AddDormComponent,AddProductComponent
],imports: [
BrowserModule,AppRoutingModule,HttpClientModule,BrowserAnimationsModule,FormsModule,ReactiveFormsModule,ImageCropperModule,DeferLoadModule,//Angular Material inputs (spezielle UI Elemente)
MatDatepickerModule,MatInputModule,MatNativeDateModule,MatSliderModule,MatSnackBarModule,MatSelectModule,MatCardModule,MatTooltipModule,MatChipsModule,MatIconModule,MatExpansionModule,MDBBootstrapModule,AgmCoreModule.forRoot({
apiKey: gmaps_environment.GMAPS_API_KEY
})
],providers: [
UploadFileService,{provide: MAT_DATE_LOCALE,useValue: 'de-DE'},{provide:HTTP_INTERCEPTORS,useClass:BasicAuthHttpInterceptorService,multi:true},],bootstrap: [AppComponent],})
export class AppModule { }
解决方法
您能否从测试用例的FormBuilder
数组中删除providers
并导入ReactiveFormsModule
。
TestBed.configureTestingModule({
imports: [HttpClientTestingModule,ReactiveFormsModule],providers: [{ provide: TokenStorageService,useValue: tokenStorageServiceStub },{ provide: AuthenticationService,useValue: authenticationServiceStub }
注意:请勿将import元素放在花括号中。
,现在,您仅声明了存根tokenStorageServiceStub
和authenticationServiceStub
,但是需要在提供存根之前对其进行初始化。遵循这些原则:
tokenStorageServiceStub = {
saveToken: () => {}
};
authenticationServiceStub = {
login: () => of({status: 200,body: {}})
}
此外,还要考虑@PrincelsNinja的推荐。
,使用测试台时,您的app.module.ts
文件无关。请检查所有组件导入,将它们放入.configureTestBed
-import中,并特别注意使用指令。
缺少导入时,我经常会收到此错误。
, providers: [
ReactiveFormsModule,{ provide: TokenStorageService,useClass: {saveToken: (data: any) => data} },useClass: {
login: (loginDetails: any): Promise<any> => {
return {status: 200}}.toPromise(); } }
}
},]
此外,从规范文件中删除TokenStorageService和AuthenticationService的导入,以查看这些导入是否导致dynamictestingmodule中的第一个未定义错误。
,可能是因为它没有从您提到的路径中获取文件。使用与组件文件中提到的路径相同的路径,然后尝试。 通常是由于文件路径错误,声明重复,不是声明等引起的。
ys
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。