更新

Question

我仍在尝试找出角度测试，而我正在为失败的测试而苦苦挣扎。当我使用ng-test运行测试时，Chrome输出显示以下错误：

CustomerComponent should create
[object ErrorEvent] thrown

这是控制台内容：

zone.js:192 Uncaught TypeError: _this.handler.handle is not a function
    at MergeMapSubscriber.project (:9876/_karma_webpack_/webpack:/node_modules/@angular/common/fesm5/http.js:974)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:50)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
    at Observable._subscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/observable/scalar.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:28)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:28)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:23)
    at FilterOperator.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/filter.js:15)
    at ____________________Elapsed_12_ms__At__Mon_Oct_22_2018_15_18_53_GMT_0200__heure_d__t__d_Europe_centrale_ ()
    at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:108)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401)
    at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:297)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:232)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:255)
    at scheduleMacroTaskWithCurrentZone (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1114)
    at :9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:2090

测试文件是...嗯，我想您可以找到最基本的文件。

class MockCustomerService {
  public addUserInformations(): Observable<Customer> {
    return of(new Customer());
  }
  public updateCustomerInformations(): Observable<Customer> {
    return of(new Customer());
  }
}

export class PartialTranslateServiceStub {
  addLangs(langs: Array<string>): void { }
  instant (key: string): any { }
}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [CustomerComponent, ModalComponent, SecondComponent],
      providers: [FormBuilder, ConfigurationService,
            { provide: TranslateService, useClass: PartialTranslateServiceStub },
            { provide: CustomerService, useClass: MockCustomerService }
      ],
      imports: [FormsModule, ReactiveFormsModule, RouterTestingModule, TranslateModule.forRoot()]
    })
      .compileComponents();
  }));

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

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

我看到大多数答案是向订户添加一个错误处理程序，但这已经完成了。

此外，我尝试从头开始重新制作该组件，然后...创建新组件时，失败的测试成功进行。卸下组件会使测试再次失败。

更新

备注：如果我评论失败的测试，则问题将移至下一个测试。奇怪。

Answer 1

答案

问题解决了。在失败的测试之前运行的测试未正确完成，因此影响了以下测试。似乎问题出在没有适当模拟的提供程序上：例如，代替MockPreviousService而不是PreviousService，DependencyOne，DependencyTwo。在测试用例中它是没有用的，因此摆脱声明并模拟服务就可以了。

Answer 2

您的问题似乎来自mergeMap。我的猜测是TranslateLoader是元凶。

您为什么在测试中使用真实的东西？我建议像这样创建TranslateModule的存根：

export class PartialTranslateServiceStub {
    addLangs(langs: Array<string>): void { }
    instant (key: string): any { }
}

，然后在测试中删除转换模块，并使用提供程序的存根：

providers: [FormBuilder, CustomerService, ConfigurationService, 
            {provide: TranslateService, useClass: TranslateServiceStub},
            ApiRequestService, AppConfig, HttpClient, HttpHandler],
imports: [FormsModule, ReactiveFormsModule, RouterTestingModule]

为什么仅在测试全部运行时才抛出[object ErrorEvent]？

更新

2 个答案:

答案