如何用Vue Test Utils和Jest模拟axios？遇TypeError问题求助

常见原因及解决方法 #

1. 未正确Mock axios模块 #

测试异步请求时，必须模拟axios的get方法——既避免发起真实网络请求，也确保测试环境中该方法存在。如果直接使用真实axios但未在测试环节做模拟配置，就会触发这个错误。

解决步骤：
在测试文件顶部用jest.mock（假设你使用Jest作为测试框架）mock整个axios模块：

// 测试文件开头
import axios from 'axios'
jest.mock('axios')

// 在测试用例中定义mock的返回值
test('异步请求渲染数据', async () => {
  axios.get.mockResolvedValue({ data: { items: ['示例数据1', '示例数据2'] } })
  
  // 后续挂载组件、执行断言逻辑...
})

2. 组件中axios的使用方式与Mock不匹配 #

如果你的组件是通过Vue原型全局注入axios（比如用Vue.use(axios)或手动挂载Vue.prototype.$axios），但你只mock了直接导入的axios，就会导致原型上的$axios.get未被模拟，从而报错。

解决步骤：
直接mock Vue的原型属性：

import Vue from 'vue'

// 在测试文件开头mock全局注入的$axios
Vue.prototype.$axios = {
  get: jest.fn(() => Promise.resolve({ data: { items: ['全局注入的测试数据'] } }))
}

3. 依赖安装不完整（少见但需排查） #

如果项目中未安装axios，或者测试环境依赖缺失，也可能导致该错误。执行以下命令确保axios已安装：

npm install axios --save

完整示例参考 #

组件代码（AsyncComponent.vue） #

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  async mounted() {
    const response = await axios.get('/api/items')
    this.items = response.data.items
  }
}
</script>

测试代码 #

import { mount } from '@vue/test-utils'
import AsyncComponent from './AsyncComponent.vue'
import axios from 'axios'

jest.mock('axios')

describe('AsyncComponent', () => {
  test('加载并渲染异步数据', async () => {
    // 模拟axios.get的返回值
    axios.get.mockResolvedValue({
      data: { items: ['测试项1', '测试项2'] }
    })

    const wrapper = mount(AsyncComponent)
    
    // 等待异步操作完成
    await wrapper.vm.$nextTick()
    
    // 断言列表渲染正确
    expect(wrapper.findAll('li')).toHaveLength(2)
    expect(wrapper.text()).toContain('测试项1')
  })
})

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