Typescript and Jest: Avoiding type errors on mocked functions

Question

When wanting to mock external modules with Jest, we can use the jest.mock() method to auto-mock functions on a module.

We can then manipulate and interrogate the mocked functions on our mocked module as we wish.

For example, consider the following contrived example for mocking the axios module:

import myModuleThatCallsAxios from '../myModule'; import axios from 'axios';  jest.mock('axios');  it('Calls the GET method as expected', async () => {   const expectedResult: string = 'result';    axios.get.mockReturnValueOnce({ data: expectedResult });   const result = await myModuleThatCallsAxios.makeGetRequest();    expect(axios.get).toHaveBeenCalled();   expect(result).toBe(expectedResult); }); 

The above will run fine in Jest but will throw a Typescript error:

Property 'mockReturnValueOnce' does not exist on type '(url: string, config?: AxiosRequestConfig | undefined) => AxiosPromise'.

The typedef for axios.get rightly doesn't include a mockReturnValueOnce property. We can force Typescript to treat axios.get as an Object literal by wrapping it as Object(axios.get), but:

What is the idiomatic way to mock functions while maintaining type safety?

Answer 1

Add this line of code const mockedAxios = axios as jest.Mocked<typeof axios>. And then use the mockedAxios to call the mockReturnValueOnce. With your code, should be done like this:

import myModuleThatCallsAxios from '../myModule'; import axios from 'axios';  jest.mock('axios'); const mockedAxios = axios as jest.Mocked<typeof axios>;  it('Calls the GET method as expected', async () => {   const expectedResult: string = 'result';    mockedAxios.get.mockReturnValueOnce({ data: expectedResult });   const result = await myModuleThatCallsAxios.makeGetRequest();    expect(mockedAxios.get).toHaveBeenCalled();   expect(result).toBe(expectedResult); });