在React jest API测试中没有调用模拟函数，也没有解析或返回模拟值

Question

我使用jest来测试axios API调用。mock API没有解析或返回值，也没有调用mock函数。这是我的API调用和测试代码。

这是具有postData函数的基本服务文件

import axios from 'axios';
const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
function setHeader(contentType:string, token:string|undefined) {
return {
'Accept': 'application/json',
'Content-Type': contentType,
'Authorization': `Bearer ${token}`,
};
}
async function postData(path:string, contentType:string, token:string|undefined,
payload:FormData | Record<string, any> | string) {
return axios({
method: 'post',
url: `${API_ENDPOINT}${path}`,
headers: setHeader(contentType, token),
data: payload,
});
}
export {postData}

这是我尝试过的测试文件代码。

import '@testing-library/jest-dom';
import axios from 'axios';
import confirmProfile from '../../apis/onboard/confirmProfile';
jest.mock('axios');
const mockAxios=axios as jest.Mocked<typeof axios>;
const VALID_TOKEN='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzZXNzaW9uIjoicmRjZDhpbXduOXl0YjZ5eTRrN3I4NnJsb3RjcnZ0cHkiLCJuYmYiOjE2NTI2NzYyNTguMzcwNTUyOCwiaXNzIjoiZ296ZWFsIn0.IR1hNOZPY4rcrykJgzrGkgfJM9vJNuveG-KS8BYaxnI';
it("Confirm profile original file with valid params",async ()=>{
const res={confirmProfileData: { isSuccess: false }, 
apiError: undefined,
}
mockAxios.post.mockResolvedValueOnce(res);
const response = await confirmProfile(VALID_TOKEN);
console.log('profile',response);
expect(mockAxios.post).toHaveBeenCalledTimes(1);
expect(response).toEqual(res);
})

检测结果

FAIL  src/__tests__/apis/Testing.test.ts
✕ Confirm profile original file with valid params (10 ms)
● Confirm profile original file with valid params
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
27 |     const response = await confirmProfile(VALID_TOKEN);
28 |     console.log('profile',response);
> 29 |     expect(mockAxios.post).toHaveBeenCalledTimes(1);
|                            ^
30 |     expect(response).toEqual(res);
31 | })
32 |
at Object.<anonymous> (src/__tests__/apis/Testing.test.ts:29:28)
console.log
profile { confirmProfileData: { isSuccess: true }, apiError: undefined }
at Object.<anonymous> (src/__tests__/apis/Testing.test.ts:32:1)
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.857 s, estimated 3 s

模拟函数没有被调用，模拟值没有解析或日志

Answer 1

问题是由于您的代码没有直接调用axios模块实例上的post函数，而是通过json参数隐式地执行该函数，而您的测试模拟正在寻找直接的axios。post调用。有两种方法可以解决这个问题。

1。将隐式post调用更改为显式post调用:

来自:

axios({
method: 'post',
url: `${API_ENDPOINT}${path}`,
headers: setHeader(contentType, token),
data: payload,
})

:

axios.post(`${API_ENDPOINT}${path}`, payload, { headers: setHeader(contentType, token) })

2。在测试套件设置中模拟axios post调用:

来自:

jest.mock("axios")

jest.mock("axios", () => {
const expectedResponse = JSON.stringify({
"access_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImMxZDY2OTF",
"issued_token_type": "token-type:access_token",
"token_type": "Bearer",
"expires_in": 3600,
"scope": "consumer_profile:read:"
});
return () => new Promise((resolve) => resolve(expectedResponse));
})

这将通过部分模拟模拟隐式post调用，但是您将无法直接访问post方法，因此您将无法专门侦听其调用。