首页 > 解决方案 > 运行测试时角度单元测试文件中的令牌说明符无效?

问题描述

我有一个我正在写的angular component名字。下面是该组件的测试文件的代码appointmentunit-testappointment.component.ts

appointment.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms'

import { HttpClientModule } from '@angular/common/http';
import { HTTPService, HelperService, DataService } from '../../../services';

import { AppointmentComponent } from './appointment.component';
import { CancelApptDialogComponent } from '../cancel-appt-dialog/cancel-appt-dialog.component';
import { UpdateApptDialogComponent } from 'app/modules/app-components/update-appt-dialog/update-appt- 
dialog.component';
import { ReminderItemComponent } from './../reminder-item/reminder-item.component';

import { AutoCompleteModule } from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import { NgxMaskModule } from 'ngx-mask';

import { CookieModule, CookieService } from 'ngx-cookie';
import { ToastrModule, ToastrService } from 'ngx-toastr';

import { DialogService } from 'primeng/dynamicdialog';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { DynamicDialogConfig } from 'primeng/dynamicdialog';
import { CalendarModule } from 'primeng/calendar';

import { SharedModule } from './../../shared/shared.module';


describe('AppointmentComponent', () => {
 let component: AppointmentComponent;
 let fixture: ComponentFixture<AppointmentComponent>;

 beforeEach(async(() => {
  TestBed.configureTestingModule({
   declarations: [
      AppointmentComponent, 
      CancelApptDialogComponent, 
      UpdateApptDialogComponent,
      ReminderItemComponent
    ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    AutoCompleteModule,
    CheckboxModule,
    NgxMaskModule.forRoot(),
    HttpClientModule,
    RouterTestingModule,
    SharedModule,
    CookieModule.forRoot(),
    ToastrModule.forRoot(),
    CalendarModule
  ],
  providers: [
    HTTPService,
    HelperService,
    DataService,
    DialogService,
    DynamicDialogRef,
    DynamicDialogConfig,
    CookieService,
    ToastrService,
   ]
 })
  .compileComponents();
}));

beforeEach(() => {
 fixture = TestBed.createComponent(AppointmentComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
});

 it('should create appointment comp', () => {
  expect(component).toBeTruthy();
 });

});

当我运行测试时,它会抛出这样的错误

InvalidTokenError: Invalid token specified

在此处输入图像描述

是什么导致了这个错误?

标签: angulartypescript

解决方案


只需像下面那样模拟您的服务。这些不是你添加的相同服务,以此为例,在你的代码中做这样的事情

 const dialogServiceSpy = createSpyObj<DialogService>(['open']);
  const dialogRefSpy = createSpyObj<MatDialogRef<any>>(['close']);
 .........................

 providers: [ 
        { provide: DialogService, useValue: dialogServiceSpy },
        { provide: MatDialogRef, useValue: dialogRefSpy },
        { provide: MAT_DIALOG_DATA, useValue: {} },
        ]

提供所有想要的服务,在那里删除不需要的服务。


推荐阅读