vuetest-utils如何mock网络请求

要在@vue/test-utils中mock网络请求，可以使用jest的mock功能来模拟网络请求的行为。以下是一种常见的做法：

首先，安装jest-mock-axios库，它提供了一个方便的方式来模拟axios的行为。

npm install jest-mock-axios --save-dev

在测试文件中，导入axios和mockAdapter。

import axios from 'axios';
import MockAdapter from 'jest-mock-axios';

在测试用例之前，创建一个mockAdapter实例，并将其设置为axios的默认适配器。

const mock = new MockAdapter(axios);

在测试用例中，使用mockAdapter的onGet、onPost等方法来模拟网络请求的响应。

mock.onGet('/api/data').reply(200, {
  data: 'mocked data'
});

在测试用例中，使用@vue/test-utils的mount方法来挂载组件，并在组件中进行网络请求。

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('should fetch data from API', () => {
    const wrapper = mount(MyComponent);
    // ...
  });
});

在测试用例中，可以使用expect语句来断言组件是否正确处理了网络请求的响应。

expect(wrapper.vm.data).toBe('mocked data');

最后，在测试用例之后，使用mockAdapter的reset方法来重置模拟的网络请求。

afterEach(() => {
  mock.reset();
});

通过以上步骤，你就可以在@vue/test-utils中mock网络请求了。这样可以使得测试更加可靠和独立，而不依赖于真实的网络请求。