如何使用Jest测试axios请求 解决异步执行结果不一致问题

问题根源 #

测试结果不稳定的核心原因是未对axios进行模拟，测试过程中直接发起真实网络请求，网络波动、后端接口状态、参数缺失等不可控因素都会导致每次返回结果不一致。
另外你的代码还存在两个可优化点：

• async测试函数内不需要额外return expect语句，async本身会自动包装为Promise返回
• 调用auth.signin()时未传入接口要求的data参数，可能导致接口校验失败返回错误

修复步骤 #

1. 新增axios模拟文件 #

在测试目录下新建__mocks__/axios.js，写入如下模拟逻辑：

export default {
  post: jest.fn((url, data) => {
    // 可根据测试场景自定义返回值
    if (url === '/signin') {
      // 模拟成功返回
      return Promise.resolve({
        data: {
          success: true,
          // 其他自定义返回字段
        }
      })
      // 如需模拟失败可返回 Promise.reject({ response: { success: false } })
    }
    return Promise.reject(new Error('未知接口'))
  })
}

2. 修改测试文件test.js #

const auth = require('../methods/auth.js');
// 告知jest使用模拟的axios
jest.mock('axios')
const axios = require('axios')

describe('signin 接口测试', () => {
  // 每次测试前清空模拟调用记录
  beforeEach(() => {
    axios.post.mockClear()
  })

  test('登录成功时返回success为true', async () => {
    expect.assertions(2);
    // 传入登录需要的参数
    const testLoginData = {
      username: 'test',
      password: '123456'
    }
    const data = await auth.signin(testLoginData);
    expect(axios.post).toHaveBeenCalledWith('/signin', testLoginData)
    expect(data.success).toBeTruthy();
  });

  test('登录失败时返回错误响应', async () => {
    expect.assertions(1);
    // 自定义本次模拟的返回为失败
    axios.post.mockImplementationOnce(() => 
      Promise.reject({
        response: { success: false, msg: '账号密码错误' }
      })
    )
    const data = await auth.signin({ username: 'wrong', password: 'wrong' });
    expect(data.success).toBeFalsy();
  });
})

3. 验证修复效果 #

修改完成后重新运行测试，所有请求都会走本地模拟逻辑，不会发起真实网络请求，测试结果会完全固定可预期。

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