javascriptangularunit-testingjestjsangular-test

How test request http with parameters with jest - angular


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"}]
   }
 }

Solution

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