使用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

angular jasmine karma-jasmine unit-testing