How test request http with parameters with jest - angular

Question

I'm testing an angular service with Jest.

I can to mock my httpClient, but I have a problem it is that I cannot test a url with a parameter (ex: "http://localhost:8080/api/feature/num?id=25663").

This my test code :

describe('MyService', () => {
   let myService: MyService;
   const httpMock = {get: jest.fn(() => of(dataMock))};
   const provide = (mock: any): any => mock;

   beforeEach(() => {
      myService= new MyService(provide(httpMock));
   });

   test('should created', () => {
     expect(myService).toBeTruthy();
   });

   test('should retrieve one user', (done) => {
     const number = 26586;
     const url = 'http://localhost:8080/api/feature/num?number=25663';

     myService.getNumero(number).subscribe( 
       res => {
          expect(httpMock.get).toBeCalledWith(url);
          expect(res.number).toBe(number);
          expect(res.city).toEqual('PARIS');
          done();
     });
   });
});

And in my console I have this error :

Error: Uncaught [Error: expect(jest.fn()).toBeCalledWith(...expected)

Expected: "http://localhost:8080/api/feature/num?number=25663"
Received: "http://localhost:8080/api/feature/num, {
 "params": {
    "cloneFrom": {
        "cloneFrom": null, 
        "encoder": {}, 
        "map": null, 
        "updates": null
     },
     "encoder": {}, 
     "map": null,
     "updates": [{"op": "a", "param": "number", "value": "25663"}]
   }
 }

Answer 1

Usually I do like this

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

...

describe('MyService', () => {
    let injector: TestBed;
    let httpMock: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [],
        });
        injector = getTestBed();
        httpMock = injector.get(HttpTestingController);
    });

    afterEach(() => {
        httpMock.verify();
    });

...

    it('should return number and city', () => {
        const expectedResult: {
            number: 26586,
            city: 'PARIS'
        };

        const service : MyService = TestBed.get(MyService);
        service.getNumero(number)
            .pipe(
                first(),
            )
            .subscribe((data) => {
                expect(data).toMatchObject(expectedResult);
            });

        const req = httpMock.expectOne(`http://localhost:8080/api/feature/num?number=25663`);
        expect(req.request.method).toBe('GET');
        req.flush(expectedResult);
    });

Answer 2

You can use jest's resolves operator:

it('should return number and city', () => {
    const expectedResult: {
        number: 26586,
        city: 'PARIS'
    };

    const service : MyService = TestBed.get(MyService);
    expect(service.getNumero(number).toPromise())
        .resolves.toMatchObject(expectedResult);

    const req = httpMock.expectOne(`http://localhost:8080/api/feature/num?number=25663`);
    expect(req.request.method).toBe('GET');
    req.flush(expectedResult);
});

Answer 3

This is in response to the comments on the accepted answer.

I too had the same issue that when following the official Angular documentation test setup for Http requests, my expect inside was never actually executed and wasn't verifying my expected objet, however I found the solution using fakeAsync like so:

// define expected object outside tests
const expected = {...}

it('should validate request and response', fakeAsync(() => {
   // use last value RxJs operator to convert observable into promise
   lastValueFrom(service.doSomething()).then(res => expect(res).toEqual(expected));

   const req = httpTestingController.expectOne({
     method: 'GET',
     url: `${url}/doSomething`
   });

   // flush with expected body value
   req.flush(...);
   // run tick() or flush() to flush async queues and execute expected comparison
   tick();
}));

This will do the expected behavior we want. Hope it helps.