为什么 [对象错误事件] 仅在测试全部运行时抛出?

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

答案

问题解决了。 在失败的测试之前运行的测试未正确完成，从而影响以下内容。似乎问题来自没有被适当嘲笑的提供者：例如，它更像是PreviousService、DependencyOne、DependencyTwo，而不是MockPreviousService。它在测试用例中毫无用处，因此摆脱声明并嘲笑服务就可以了。

Answer 2

你的问题似乎来自一个 mergeMap。我的猜测是翻译加载器是罪魁祸首。

你为什么要在测试中使用真实的东西？我建议像这样创建一个翻译模块的存根：

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]