How to mock with strict TypeScript

Question

For example:

let mockhttp; // 1

beforeEach(() => {
    mockhttp = { //3
        get: jest.fn()
    };

    mockhttp.get.mockReturnValue(of(...)); //4
});

it('should fetch', async () => {
    const service = new MyService(mockhttp as any as HttpClient); //2
});

This will give the following error on 1 and 2.

Variable 'mockhttp' implicitly has type 'any' in some locations where its type cannot be determined.

Changing let mockhttp; to let mockhttp: HttpClient;

Gives on 3:

Type '{ get: Mock ; }' is missing the following properties from type 'HttpClient': handler, request, delete, head, and 5 more.

and on 4:

TS2339: Property 'mockReturnValue' does not exist on type '{ (url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; context?: HttpContext; observe?: "body"; params?: HttpParams | { [param: string]: string | number | boolean | readonly (string | ... 1 more ... | boolean)[]; }; reportProgress?: boolean; responseType: "arraybuffer"; withCred...'

Is there a way to solve this without adding //@ts-ignore everywhere?

Note: this question is not about testing the httpclient or anything related. It is just for demo purpose. It could be any other service or component.

Does this answer your question? [Typescript and Jest: Avoiding type errors on mocked functions](https://stackoverflow.com/questions/51495473/typescript-and-jest-avoiding-type-errors-on-mocked-functions) — jonrsharpe, Jun 24 '21 at 08:54
Your edit still doesn't explain how the proposed dupe fails to answer your question. — jonrsharpe, Jun 24 '21 at 19:40
Great, then it should be easy to add: I read , I did , but still get . — jonrsharpe, Jun 25 '21 at 06:41

score -1 · Answer 1 · answered Jun 24 '21 at 09:15

-1

Angular provides a nice package for testing HTTP communication.

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let httpMock: HttpTestingController;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [AppComponent]
    })
      .compileComponents();

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

Here is a nice article with examples: Testing Angular HTTP Communication.

answered Jun 24 '21 at 09:15

IAfanasov

4,775
3
27
42

This question is not about testing the HttpClient – Robin Dijkhof Jun 24 '21 at 11:03
sorry, I didn't restrict myself from stopping reinvention of a wheel (: – IAfanasov Jun 24 '21 at 12:09
1

@RobinDijkhof the HttpClientTestingModule isn't about testing the HttpClient, but testing things that _use_ it, which is what you seem to be doing. See https://angular.io/guide/http#testing-http-requests – jonrsharpe Jun 24 '21 at 13:33

How to mock with strict TypeScript

1 Answers1