Jasmineを使用したAngularユニットテスト-エラー：@NgModuleアノテーションを追加してください
2つのサービスと1つのフォームを使用するAngularコンポーネントのJasmineユニットテスト（Karmaを使用）を作成しようとしています。テストに関するチュートリアル（Angular Docsのこのチュートリアルのような）は、1つのサービスでコンポーネントをテストする方法のみを示しており、どういうわけか、もう少し複雑なコンポーネントでコンポーネントを機能させることができません。
私のコンポーネント：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：
したがって、コンストラクターで提供する3つのもの（FormBuilder、、TokenStorageServiceおよびAuthenticationService）も、で提供する必要があることを理解しましたTestBed。そして、ユニットテスト用のサービスを実際に注入したくないので、代わりにスタブサービスを使用しています。だから私はこれをしました：
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}],
providers: [{provide: FormBuilder}, { provide: TokenStorageService, useValue: tokenStorageServiceStub }, { provide: AuthenticationService, 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行コメントしましたが、Angular Docsの例では、テストで実際のサービスを使用したくないと言っても、実際のサービスを注入しています。ドキュメントの例のその部分がわかりませんか？
しかし、どちらの方法でも、このエラーメッセージが表示され続けます。
エラーが何かを言っているので、@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 { }
回答
現在、スタブtokenStorageServiceStubとを宣言しただけauthenticationServiceStubですが、提供する前に初期化する必要があります。それらの線に沿った何か：
tokenStorageServiceStub = {
saveToken: () => {}
};
authenticationServiceStub = {
login: () => of({status: 200, body: {}})
}
さらに、@ PrincelsNinjaによる推奨を考慮に入れてください。
テストケースの配列FormBuilderからを削除して、代わりにprovidersインポートしてくださいReactiveFormsModule。
TestBed.configureTestingModule({
imports: [HttpClientTestingModule, ReactiveFormsModule],
providers: [{ provide: TokenStorageService, useValue: tokenStorageServiceStub }, { provide: AuthenticationService, useValue: authenticationServiceStub }
注：インポート要素を中括弧で囲まないでください。
あなたのapp.module.tsテストベッドを使用している場合、ファイルは無関係です。コンポーネントのすべてのインポートを確認し、それらを.configureTestBed-importに入れて、ディレクティブに特に注意してください。
インポートが欠落していると、このエラーが頻繁に発生します。
providers: [
ReactiveFormsModule,
{ provide: TokenStorageService,
useClass: {saveToken: (data: any) => data} },
{ provide: AuthenticationService,
useClass: {
login: (loginDetails: any): Promise<any> => {
return {status: 200}}.toPromise(); } }
}
},
]
また、仕様ファイルからTokenStorageServiceとAuthenticationServiceのインポートを削除して、それらがdynamictestingmoduleで最初の未定義エラーの原因であるかどうかを確認します。
あなたが言及したパスからファイルを取得していないことが原因である可能性があります。コンポーネントファイルに記載されているのと同じパスを使用して、試してください。ほとんどの場合、この種の問題は、間違ったファイルパス、重複した宣言、宣言ではないなどが原因で発生します。
import { TokenStorageService } from '../../../_services/token-storage.service';
import { AuthenticationService } from '../../../_services/authentication.service';