How to Use HttpClientTestingModule in Angular Testing

Use HttpClientTestingModule by importing it into your Angular test module to replace real HTTP calls with mock requests. It allows you to test HTTP services safely by controlling and verifying requests with HttpTestingController.

Syntax

Import HttpClientTestingModule in your test module's imports array to mock HTTP requests. Inject HttpTestingController to control and verify these requests.

This setup replaces real HTTP calls with mock ones, so your tests don't hit the network.

typescript

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

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule],
  providers: [YourService]
});

const httpMock = TestBed.inject(HttpTestingController);

Example

This example shows how to test a service method that makes an HTTP GET request using HttpClientTestingModule and HttpTestingController. It verifies the request URL and mocks the response.

typescript

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
class DataService {
  constructor(private http: HttpClient) {}

  fetchData() {
    return this.http.get('/api/data');
  }
}

describe('DataService', () => {
  let service: DataService;
  let httpMock: HttpTestingController;

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

    service = TestBed.inject(DataService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should fetch data with GET request', () => {
    const mockResponse = { id: 1, name: 'Test' };

    service.fetchData().subscribe(data => {
      expect(data).toEqual(mockResponse);
    });

    const req = httpMock.expectOne('/api/data');
    expect(req.request.method).toBe('GET');

    req.flush(mockResponse);

    httpMock.verify();
  });
});

Output

Test passes if the GET request to '/api/data' is made and the mock response is returned.

Common Pitfalls

• Not importing HttpClientTestingModule causes real HTTP calls, breaking tests.
• Forgetting to call httpMock.verify() can hide unflushed requests, leading to false positives.
• Using HttpClientModule instead of HttpClientTestingModule in tests makes real HTTP calls.

typescript

/* Wrong: Using HttpClientModule in tests */
import { HttpClientModule } from '@angular/common/http';

TestBed.configureTestingModule({
  imports: [HttpClientModule], // This makes real HTTP calls
  providers: [YourService]
});

/* Right: Use HttpClientTestingModule */
import { HttpClientTestingModule } from '@angular/common/http/testing';

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule], // Mocks HTTP calls
  providers: [YourService]
});

Quick Reference

HttpClientTestingModule replaces real HTTP calls with mocks in tests.

HttpTestingController lets you expect, flush, and verify HTTP requests.

• Import HttpClientTestingModule in TestBed.
• Inject HttpTestingController to control requests.
• Use expectOne() to find requests.
• Use flush() to send mock responses.
• Call verify() to ensure no unexpected requests remain.

Key Takeaways

Always import HttpClientTestingModule in your test module to mock HTTP requests.

Use HttpTestingController to expect and flush HTTP calls in your tests.

Call httpMock.verify() to confirm all requests are handled.

Never use HttpClientModule in tests when mocking HTTP calls.

HttpClientTestingModule helps keep tests fast and network-independent.