React测试中如何获取被mock的axios.get的请求参数与路径

方案1：动态根据入参返回不同mock结果 #

使用mockImplementation替换原有的mockResolvedValue，可以直接捕获axios.get接收到的所有入参，根据请求地址、查询参数返回对应数据：

axios.get.mockImplementation((requestUrl, config) => {
  // requestUrl 就是你动态生成的完整请求字符串
  // config 是你传入axios.get的第二个参数，比如headers、params等配置
  // 示例：根据请求携带的搜索词返回对应结果
  if (requestUrl.includes('keyword=前端')) {
    return Promise.resolve({
      data: {
        list: [
          { name: "前端开发入门", id: 101 },
          { name: "React实战教程", id: 102 }
        ]
      }
    })
  }
  // 其他场景返回默认结果
  return Promise.resolve({
    data: {
      list: [
        { name: "Name 1", id: 0 },
        { name: "Name 2", id: 1 }
      ]
    }
  })
})

方案2：校验axios.get接收的入参是否符合预期 #

如果你不需要动态返回结果，只需要验证请求生成的字符串、参数是否正确，可以直接读取mock函数的calls属性获取所有调用记录：

// 触发你的业务请求逻辑后执行校验
// 取axios.get的第一次调用的入参，索引0对应第一次调用，1对应第二次以此类推
const [receivedUrl, receivedConfig] = axios.get.mock.calls[0]

// 校验请求字符串是否符合预期
expect(receivedUrl).toMatch(/\/api\/list\?keyword=测试搜索词/)
// 校验传入的配置项是否正确
expect(receivedConfig.params).toEqual({
  page: 1,
  pageSize: 20
})

注意：如果你项目中使用axios.create创建了自定义实例发起请求，需要确保你mock的是对应实例的get方法，否则会出现mock不生效的问题。

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