vue实现接口测试
Vue 实现接口测试的方法
使用 Axios 进行接口请求
安装 Axios 依赖：
npm install axios在 Vue 组件中引入并使用：
import axios from 'axios';
export default {
methods: {
async fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
}配置全局 Axios 实例
创建 src/utils/request.js 文件：
import axios from 'axios';
const service = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
service.interceptors.request.use(config => {
config.headers['Authorization'] = 'Bearer token';
return config;
});
service.interceptors.response.use(
response => response.data,
error => Promise.reject(error)
);
export default service;使用 Mock 数据进行测试
安装 Mock.js：
npm install mockjs创建 src/mock/index.js：
import Mock from 'mockjs';
Mock.mock('/api/data', 'get', {
'list|10': [{
'id|+1': 1,
'name': '@cname'
}]
});测试异步逻辑
使用 async/await 测试异步方法：
test('fetches data successfully', async () => {
const mockData = { data: { id: 1 } };
axios.get.mockResolvedValue(mockData);
const wrapper = mount(Component);
await wrapper.vm.fetchData();
expect(wrapper.vm.data).toEqual(mockData.data);
});处理错误情况
测试错误处理：
test('handles fetch error', async () => {
axios.get.mockRejectedValue(new Error('Network Error'));
const wrapper = mount(Component);
await wrapper.vm.fetchData();
expect(wrapper.vm.error).toBeTruthy();
});使用 Vue Test Utils 测试组件
安装测试工具：
npm install @vue/test-utils jest vue-jest示例测试文件：
import { mount } from '@vue/test-utils';
import Component from './Component.vue';
jest.mock('axios');
test('displays loading state', () => {
const wrapper = mount(Component);
expect(wrapper.find('.loading').exists()).toBe(true);
});环境变量配置
创建 .env.development：
VUE_APP_API_URL=https://dev.api.example.com创建 .env.production：
VUE_APP_API_URL=https://api.example.com在代码中使用：
const apiUrl = process.env.VUE_APP_API_URL;
