Vue Test Utils测试中无法识别$http的解决方法咨询

这个问题我熟得很——本质是Jest跑测试时，不会自动加载你项目里全局配置的Axios，所以组件里的this.$http就变成undefined了。用Moxios模拟是绝佳方案，给你两种实用的解决思路：

1. 全局配置（适合所有测试用例复用） #

首先确保你已经安装了Moxios：

npm install moxios --save-dev
# 或者用yarn
yarn add moxios --dev

然后在Jest的全局配置文件里（一般是jest.setup.js，需要在jest.config.js里通过setupFilesAfterEnv字段指向它）添加以下代码：

import Vue from 'vue';
import axios from 'axios';
import moxios from 'moxios';

// 把Moxios绑定到Axios实例上，拦截所有请求
moxios.install(axios);

// 给Vue原型挂载$http，和你项目里的全局配置保持一致
Vue.prototype.$http = axios;

// 测试结束后卸载Moxios，避免状态污染其他测试用例
afterEach(() => {
  moxios.uninstall(axios);
});

这样所有测试用例里的Vue组件都会自动拥有this.$http，而且Moxios会自动拦截所有Axios请求。

2. 单个测试文件单独配置（灵活度更高） #

如果不想全局配置，只想在特定测试里处理，可以这么做：

比如你要测试UserList.vue组件，里面有个方法调用this.$http.get('/users')：

import { mount } from '@vue/test-utils';
import UserList from '@/components/UserList.vue';
import axios from 'axios';
import moxios from 'moxios';

describe('UserList', () => {
  beforeEach(() => {
    // 测试前安装Moxios并绑定Axios
    moxios.install(axios);
  });

  afterEach(() => {
    // 测试后卸载Moxios，重置请求状态
    moxios.uninstall(axios);
  });

  it('fetches users when component mounts', async () => {
    // 模拟GET /users请求的返回数据
    moxios.stubRequest('/users', {
      status: 200,
      response: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]
    });

    // 挂载组件时，通过mocks选项注入$http
    const wrapper = mount(UserList, {
      mocks: {
        $http: axios
      }
    });

    // 等待Moxios完成异步请求模拟
    await moxios.wait();

    // 验证组件是否正确渲染了用户列表
    expect(wrapper.text()).toContain('John');
    expect(wrapper.text()).toContain('Jane');
  });
});

关键注意事项 #

• 一定要在测试前后安装/卸载Moxios，不然请求状态会残留，影响其他测试用例。
• 用moxios.wait()等待异步请求完成，因为Axios请求是异步的，Jest需要等异步操作结束才能进行断言。
• 如果你的项目用的是自定义Axios实例（不是全局的axios），记得把Moxios绑定到那个自定义实例上，而不是默认的axios。

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