React Axios带回调的API调用测试问题求助

你的测试无法正常执行，核心原因是异步回调的测试逻辑未正确处理，Jest默认同步结束测试流程，不会等待回调函数执行；同时代码里还有几处语法/拼写错误需要修正，以下是具体解决步骤：

1. 修复测试用例的基础语法错误 #

测试用例的定义必须用it而非if，这是Jest的标准语法：

// 错误写法
if('Should add user', () => { ... })

// 正确写法
it('Should add user', () => { ... })

2. 处理异步回调的测试逻辑 #

因为addUser是基于回调的异步操作，需要明确告诉Jest等待回调执行完成再结束测试，有两种常用方案：

方案一：使用done回调 #

通过Jest提供的done参数，在回调执行完成后通知测试结束：

jest.mock('axios')

it('Should add user', (done) => {
    const params = {
        name: 'jack lee',
        email: 'jacktest111@gmail.com',
        phone: '09909909090'
    }
    const mockResponse = { success: true }
    axios.post.mockResolvedValue(mockResponse)

    UserService.addUser(
        params,
        (response) => {
            expect(response.success).toBe(true)
            done() // 调用done告知Jest测试完成
        },
        (error) => {
            done(error) // 若进入失败回调，传递错误信息终止测试
        }
    )

    expect(axios.post).toHaveBeenCalledTimes(1) // 注意是CalledTimes，不是CalledTime
})

方案二：封装Promise版本简化测试（可选优化） #

如果不想长期处理回调逻辑，可以给addUser封装一个Promise版本，让测试用async/await更简洁：

// UserService.js 新增Promise封装方法
addUserPromise(params) {
    return new Promise((resolve, reject) => {
        this.addUser(params, resolve, reject)
    })
}

// 测试用例
it('Should add user', async () => {
    const params = {
        name: 'jack lee',
        email: 'jacktest111@gmail.com',
        phone: '09909909090'
    }
    const mockResponse = { success: true }
    axios.post.mockResolvedValue(mockResponse)

    const response = await UserService.addUserPromise(params)
    expect(response.success).toBe(true)
    expect(axios.post).toHaveBeenCalledTimes(1)
})

3. 修复UserService的参数拼写错误 #

你的addUser方法第一个参数写为paras，但内部调用axios.post时用的是params，这会导致请求参数未正确传递，修正：

// UserService.js
addUser(params, successCallback, failureCallback) { // 将paras改为params
    axios.post(URL, params, config)
    .then((response) => {
        successCallback(response)
    })
    .catch((error) => {
        failureCallback(error)
    })
}

4. 补充失败回调的传递 #

测试时务必传递failureCallback，避免因参数缺失导致运行报错，即使不测试失败场景，也可以传入空函数或Mock函数。

内容的提问来源于stack exchange，提问作者Jack Lee