如何解决"TypeError: mockedAxios.get.mockResolvedValue is not a function"错误？

Question

我的TypeScript项目使用Jest。我试图模拟Axios，但不断得到TypeError: mockedAxios.get.mockResolvedValue is not a function错误。我已经尝试了几种方法，但不确定我在这里做错了什么。

我在这个网站上看到一些关于类似问题的文章，但当我尝试这一点时，我无法重新爱上它。

参考文献：

• Jest mocking:TypeError:axios.get.mockResolvedValue不是函数
• 使用jest typescript的Axios mock类型

代码：

httpRequest.service.ts

import { injectable } from 'inversify';
import axios from 'axios';
@injectable()
export default class HttpService {
/**
* Generic function to make HTTP calls.
* @template T
* @param [options]
* @returns request
*/
public async request<T>(options: object = {}): Promise<T> {
return axios.request(options)
.then((response) => response.data)
.catch((error) => {
throw error;
});
}
}

httpRequest.service.spec.ts

选项-1=使用axios中的AxiosResponse

import 'reflect-metadata';
import HttpService from '../httpRequest.service';
import axios, { AxiosResponse } from 'axios';
describe('httpService', () => {
let httpService: HttpService;
let mockedAxios: any;
beforeEach(() => {
jest.resetModules();
jest.resetAllMocks();
jest.mock('axios');
mockedAxios = axios as jest.Mocked<typeof axios>;
httpService = new HttpService();
});
describe('request', () => {
it('successfully returns response', async () => {
const axiosResponse: AxiosResponse = {
data: {
userId: 1,
id: 1,
title: 'mock title',
body: 'mock body',
},
status: 200,
statusText: 'OK',
config: {},
headers: {},
};
//Mocking axios function rather than a method
mockedAxios.get.mockResolvedValue(axiosResponse);
//Act
const result = await httpService.request();
//Assert
expect(result).toBe({
userId: 1,
id: 1,
title: 'mock title',
body: 'mock body',
});
});
});
});

选项-2=使用ts-jest中的mocked

import 'reflect-metadata';
import HttpService from '../httpRequest.service';
import axios, { AxiosResponse } from 'axios';
import { mocked } from 'ts-jest/dist/utils/testing';
describe('httpService', () => {
let httpService: HttpService;
beforeEach(() => {
jest.resetModules();
jest.resetAllMocks();
jest.mock('axios');
httpService = new HttpService();
});
describe('request', () => {
it('successfully returns response', async () => {
const axiosResponse: AxiosResponse = {
data: {
userId: 1,
id: 1,
title: 'mock title',
body: 'mock body',
},
status: 200,
statusText: 'OK',
config: {},
headers: {},
};
//Mocking axios function rather than a method
mocked(axios).mockResolvedValue(axiosResponse);
// mocked.get.mockResolvedValue(axiosResponse);
//Act
const result = await httpService.request();
//Assert
expect(result).toBe({
userId: 1,
id: 1,
title: 'mock title',
body: 'mock body',
});
});
});
});

选项-3=使用axios中的AxiosStatic

import HttpService from '../httpRequest.service';
import axios, { AxiosStatic } from 'axios';
interface AxiosMock extends AxiosStatic {
mockResolvedValue: any
mockRejectedValue: any
}
describe('httpService', () => {
let httpService: HttpService;
let mockAxios: any;
beforeEach(() => {
jest.resetModules();
jest.resetAllMocks();
jest.mock('axios');
mockAxios = axios as AxiosMock;
httpService = new HttpService();
});
describe('request', () => {
it('successfully returns response', async () => {
const axiosResponse: AxiosResponse = {
data: {
userId: 1,
id: 1,
title: 'mock title',
body: 'mock body',
},
status: 200,
statusText: 'OK',
config: {},
headers: {},
};
//Mocking axios function rather than a method
mockAxios.mockResolvedValue(axiosResponse);
//Act
const result = await httpService.request();
//Assert
expect(result).toBe({
userId: 1,
id: 1,
title: 'mock title',
body: 'mock body',
});
});
});
});

Answer 1

我通过在Option-1解决方案中进行两次更改来解决此问题：

1. 在导入语句后移动jest.mock('axios');。当我在beforeAll中声明它时，我不确定为什么它不起作用(对此进行调查(
2. 将mockedAxios.get.mockResolvedValue(axiosResponse);更改为mockedAxios.request.mockResolvedValue(axiosResponse);。这是一个愚蠢的错误，我的函数使用了.request，但我在嘲笑.get

这是完整的解决方案。

import 'reflect-metadata';
import HttpService from '../httpRequest.service';
import axios, { AxiosResponse } from 'axios';
jest.mock('axios');
describe('httpRequest', () => {
let httpService: HttpService;
let mockedAxios: any;
beforeAll(() => {
jest.resetModules();
jest.resetAllMocks();
mockedAxios = axios as jest.Mocked<typeof axios>;
httpService = new HttpService();
});
describe('request', () => {
it('successful', async () => {
const mockAxiosData = {
userId: 1,
id: 1,
title: '',
body: '',
};
const axiosResponse: AxiosResponse = {
data: mockAxiosData,
status: 200,
statusText: 'OK',
config: {},
headers: {},
};
mockedAxios.request.mockResolvedValue(axiosResponse);
const request = await httpService.request();
expect(request).toBe(mockAxiosData);
});
});
});