Typescript and Jest: Avoiding type errors on mocked functions Typescript and Jest: Avoiding type errors on mocked functions reactjs reactjs

Typescript and Jest: Avoiding type errors on mocked functions


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


Please use mocked function from ts-jest

import myModuleThatCallsAxios from '../myModule';import axios from 'axios';jest.mock('axios');// OPTION - 1const mockedAxios = mocked(axios, true)// your original `it` blockit('Calls the GET method as expected', async () => {  const expectedResult: string = 'result';  mockedAxios.mockReturnValueOnce({ data: expectedResult });  const result = await myModuleThatCallsAxios.makeGetRequest();  expect(mockedAxios.get).toHaveBeenCalled();  expect(result).toBe(expectedResult);});// OPTION - 2// wrap axios in mocked at the place you useit('Calls the GET method as expected', async () => {  const expectedResult: string = 'result';  mocked(axios).get.mockReturnValueOnce({ data: expectedResult });  const result = await myModuleThatCallsAxios.makeGetRequest();  // notice how axios is wrapped in `mocked` call  expect(mocked(axios).get).toHaveBeenCalled();  expect(result).toBe(expectedResult);});

I can't emphasise how great mocked is, no more type-casting ever.


To idiomatically mock the function while maintaining type safety use spyOn in combination with mockReturnValueOnce:

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