How to mock HttpClient in unit tests using Angular s HttpTestingController

Question

With the help of proper code example can you tell me How to mock HttpClient in unit tests using Angular's HttpTestingController?

Answer 1

To mock HttpClient in unit tests using Angular's HttpTestingController, follow these steps:

Steps:

1. Import Required Modules:

   import { TestBed } from '@angular/core/testing';

   import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

   import { HttpClient } from '@angular/common/http';

   import { MyService } from './my.service'; 

2. Configure TestBed:

   beforeEach(() => {

     TestBed.configureTestingModule({

       imports: [HttpClientTestingModule],

       providers: [MyService],

     });

   });

   

3. Inject Dependencies:

   let service: MyService;

   let httpMock: HttpTestingController;

   beforeEach(() => {

     service = TestBed.inject(MyService);

     httpMock = TestBed.inject(HttpTestingController);

   });

   afterEach(() => {

     httpMock.verify(); 

   });

   

4. Write Test Case:

   it('should fetch data', () => {

     const mockData = { id: 1, name: 'Test' };

     service.getData().subscribe(data => {

       expect(data).toEqual(mockData);

     });

     const req = httpMock.expectOne('https://api.example.com/data');

     expect(req.request.method).toBe('GET');

     req.flush(mockData); 

   });