如何在Angular的组件测试中在提供的服务中模拟HttpClient? [英] How to mock HttpClient in a provided service in a component test in Angular?
本文介绍了如何在Angular的组件测试中在提供的服务中模拟HttpClient?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我有一个使用HttpClient的服务,
Let's say I have a service that makes use of HttpClient,
@Injectable()
export class MyService {
constructor(protected httpClient: HttpClient) { .. }
}
然后是使用此服务的组件.
And then a component that makes use of this service.
@Component({
selector: 'my-component'
})
export class SendSmsComponent {
constructor(private MyService) { .. }
}
如何在模拟HttpClient而不是整个服务时测试该组件?
How to test this component while mocking the HttpClient and not the whole service?
TestBed.configureTestingModule({
declarations: [MyComponent],
providers: [
{ provide: MyService, useClass: MyService } // ?
]
}).compileComponents();
httpMock = TestBed.get(HttpTestingController); // ?
推荐答案
要模拟HttpClient,您可以使用 HttpTestingController
To mock HttpClient you can use HttpClientTestingModule with HttpTestingController
示例代码完成相同的操作
Sample code to accomplish the same
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Type } from '@angular/core';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { SendSmsComponent } from './send-sms/send-sms.component';
import { ApiService } from '@services/api.service';
describe('SendSmsComponent ', () => {
let fixture: ComponentFixture<SendSmsComponent>;
let app: SendSmsComponent;
let httpMock: HttpTestingController;
describe('SendSmsComponent ', () => {
beforeEach(async () => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
],
declarations: [
SendSmsComponent,
],
providers: [
ApiService,
],
});
await TestBed.compileComponents();
fixture = TestBed.createComponent(SendSmsComponent);
app = fixture.componentInstance;
httpMock = fixture.debugElement.injector.get<HttpTestingController>(HttpTestingController as Type<HttpTestingController>);
fixture.detectChanges();
});
afterEach(() => {
httpMock.verify();
});
it('test your http call', () => {
const dummyUsers = [
{ name: 'John' },
];
app.getUsers();
const req = httpMock.expectOne(`${url}/users`);
req.flush(dummyUsers);
expect(req.request.method).toBe('GET');
expect(app.users).toEqual(dummyUsers);
});
});
});
这篇关于如何在Angular的组件测试中在提供的服务中模拟HttpClient?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文