类型脚本和 Jest: 避免模拟函数上的类型错误

A usual approach to provide new functionality to imports to extend original module like declare module "axios" { ... }. It's not the best choice here because this should be done for entire module, while mocks may be available in one test and be unavailable in another.

In this case a type-safe approach is to assert types where needed:

  (axios.get as jest.Mock).mockReturnValueOnce({ data: expectedResult });
...
expect(axios.get as jest.Mock).toHaveBeenCalled();

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

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 the mocked function from ts-jest

The mocked test helper provides typings on your mocked modules and even their deep methods, based on the typing of its source. It makes use of the latest TypeScript feature, so you even have argument types completion in the IDE (as opposed to jest.MockInstance).

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';
import { mocked } from 'ts-jest/utils'


jest.mock('axios');


// OPTION - 1
const mockedAxios = mocked(axios, true)
// your original `it` block
it('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 use
it('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.

@hutabalian The code works really well when you use axios.get or axios.post but if you use a config for requests the following code:

const expectedResult: string = 'result';
const mockedAxios = axios as jest.Mocked<typeof axios>;
mockedAxios.mockReturnValueOnce({ data: expectedResult });

Will result in this error:

TS2339 (TS) Property 'mockReturnValueOnce' does not exist on type 'Mocked'.

You can solve it like this instead:

AxiosRequest.test.tsx

import axios from 'axios';
import { MediaByIdentifier } from '../api/mediaController';


jest.mock('axios', () => jest.fn());


test('Test AxiosRequest',async () => {
const mRes = { status: 200, data: 'fake data' };
(axios as unknown as jest.Mock).mockResolvedValueOnce(mRes);
const mock = await MediaByIdentifier('Test');
expect(mock).toEqual(mRes);
expect(axios).toHaveBeenCalledTimes(1);
});

mediaController.ts:

import { sendRequest } from './request'
import { AxiosPromise } from 'axios'
import { MediaDto } from './../model/typegen/mediaDto';


const path = '/api/media/'


export const MediaByIdentifier = (identifier: string): AxiosPromise<MediaDto> => {
return sendRequest(path + 'MediaByIdentifier?identifier=' + identifier, 'get');
}

request.ts:

import axios, { AxiosPromise, AxiosRequestConfig, Method } from 'axios';


const getConfig = (url: string, method: Method, params?: any, data?: any) => {
const config: AxiosRequestConfig = {
url: url,
method: method,
responseType: 'json',
params: params,
data: data,
headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' },
}
return config;
}


export const sendRequest = (url: string, method: Method, params?: any, data?: any): AxiosPromise<any> => {
return axios(getConfig(url, method, params, data))
}

After updating to the newest Axios (0.21.1) I started to have this kind of problem. I tried a lot of solutions but with no result.

My workaround:

type axiosTestResponse = (T: unknown) => Promise<typeof T>;


...


it('some example', async () => {
const axiosObject = {
data: { items: [] },
status: 200,
statusText: 'ok',
headers: '',
config: {},
} as AxiosResponse;


(Axios.get as axiosTestResponse) = () => Promise.resolve(axiosObject);
});

Starting with ts-jest 27.0 mocked from ts-jest will be deprecated and removed in 28.0 you can check it in the official documentation. So please use instead mocked from jest. Here's the documentation

So for your example:

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';


jest.mock('axios');


// OPTION - 1
const mockedAxios = jest.mocked(axios, true)
// your original `it` block
it('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);
});