Mock HttpClient in a service component test in Angular?

Question

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) { .. }
}

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); // ?

Considering that this is unit test, the proper way to do this is to mock the entire service. — Estus Flask
– Estus Flask, Commented Oct 25, 2017 at 11:03
and looking to this story in so helpful(walk before running) dev.to/zaklaughton/… — Mojtaba Pourmirzaei
– Mojtaba Pourmirzaei, Commented Oct 13, 2022 at 13:14

Liam · Accepted Answer · 2019-12-10 10:33:32Z

35

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);
    });
  });
});

edited Dec 10, 2019 at 10:33

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Aug 22, 2019 at 6:42

Siddhartha Gupta

1,1588 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

C-F Over a year ago

Is all this code really necessary to mock HttpClient? Looks like a copy-past from your project code base. Where exactly does the magic happen? Some explanations would be useful.

Aakash Goplani · Accepted Answer · 2022-05-12 07:13:15Z

21

This is the approach I follow while testing HttpClient

Create mock HttpClient object

const httpClientSpy = jasmine.createSpyObj('HttpClient', ['post', 'get']);

Injecting mock object in providers

providers: [{ provide: HttpClient, useValue: httpClientSpy }]

Return dummy valued within beforeEach() or it()

httpClientSpy.post.and.returnValue(of({ status: 200, data: {} }));
httpClientSpy.get.and.returnValue(of({ status: 200, data: {} }));

Example test case

it('should return data for abc endpoint', () => {
  service.methodWithHttpRequest().subscribe(data => expect(data.status).toBe(200));
});

edited May 12, 2022 at 7:13

answered Nov 2, 2021 at 11:34

Aakash Goplani

1,3842 gold badges23 silver badges38 bronze badges

1 Comment

danilo Over a year ago

and how to call httpClientSpy get method?

Collectives™ on Stack Overflow

Mock HttpClient in a service component test in Angular?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related