使用Jest与@vue/test-utils写Mock测试时遇axios.get报错

问题原因 #

你当前对axios的Mock结构完全错误：实际项目中src/services应该是通过axios.default.get（或axios.get）发起请求，但你Mock的axios对象只暴露了getBots方法，和axios真实的导出结构不匹配，导致代码执行时找不到get方法。

修正方案 #

需要按照axios的真实导出结构来Mock：axios默认导出的是一个包含get、post等方法的实例对象，Mock时要确保对应结构下存在get方法。

修正后的测试代码 #

// 匹配axios默认导出的结构，提供get方法的Mock实现
jest.mock('axios', () => ({
  default: {
    get: () => {
      return Promise.resolve({
        data: {
          name: "demo",
          _id: "62e8d832afdaad001b65bff5",
        }
      })
    }
  }
}))

let getBots;
describe('Load bots function', () => {
  beforeEach(async () => {
    jest.clearAllMocks()
    getBots = (await import('../../src/services')).default
  })

  it('Should load given bots', async() =>{
    const bot_Name = "demo"
    const bot_id = "62e8d832afdaad001b65bff5"

    const actual = await getBots(bot_id)
    // 根据getBots的实际返回值调整断言：如果返回接口data则断言name，否则断言响应对象的data.name
    expect(actual.name).toBe(bot_Name)
  })
})

额外说明 #

如果你的src/services中是直接用import axios from 'axios'然后调用axios.get()，可以简化Mock结构：

jest.mock('axios', () => ({
  get: () => Promise.resolve({
    data: { name: "demo", _id: "62e8d832afdaad001b65bff5" }
  })
}))

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