角度4でモックhttpリクエストを

Question

私は角度4でアプリを書くと、私はhttpのリクエストとngOnInit関数を持っている。私は単体テストを書いたが、要求を模擬する方法を知らない。

ngOnInit() { 
this.http.get<any>('someurl', { 
    headers: new HttpHeaders().set('Authorization', 'authorization'`) 
}) 
.subscribe(
    (res) => { 
    this.servB = res.items 
    .map((item) => { 
     return new ServB(item) 
    }); 
    } 
); 
} 

と私のユニットテスト、これまでに次のようになります。

beforeEach(async(() => { 
TestBed.configureTestingModule({ 
    imports: [ HttpClientModule, HttpModule ], 
    declarations: [ ServBComponent ], 
    providers : [ 
    { provide: 'someurl', useValue: '/' }, 
    { provide: XHRBackend, useClass: MockBackend } 
    ] 
}) 
.compileComponents().then(() => { 
    fixture = TestBed.createComponent(ServiceBrokersComponent); 
    component = fixture.componentInstance; 
}); 
it('should get the servb list', async(inject([XHRBackend], (mockBackend) => { 
    mockBackend.connections.subscribe((connection) => { 
    connection.mockRespond(new Response(new ResponseOptions({ 
     body: data 
    }))); 
    }); 
    fixture.detectChanges(); 
    fixture.whenStable().then(()=> { 
    console.log('anything'); 
    }); 
}))); 

が、それは動作しません。まだサーバーからのデータを要求し、嘲笑された値を返しません。さらに 'whenStable（）'の後にあるすべてのものが実行されています...私は間違っていますか？

Answer 1

あなたはこのように、HttpClientModuleの代わりにHttpClientTestingModuleをインポートする必要があります。

beforeEach(() => { 
    TestBed.configureTestingModule({ 
    imports: [HttpClientTestingModule], 
    providers: [ 
     HttpService 
    ] 
    }); 
});