使用Axios Mock Adapter模拟GET API测试时返回404问题排查

以下是几个常见的排查方向和解决方案：

1. 确保Axios实例完全一致 #

测试中mock的Axios实例必须和组件getAllPatients函数使用的实例是同一个。如果组件里用了自定义的Axios实例（比如通过axios.create创建），测试时必须导入该实例进行mock，而不是新建独立实例。

示例修正：

// 导入组件中使用的Axios实例
import { apiInstance } from '../path-to-your-api-file';
const axiosMock = new MockAdapter(apiInstance);

2. 匹配所有实际请求参数 #

组件调用getAllPatients时传递了search参数，但你的mock配置里只包含了page、sort、order，参数不匹配会导致Axios Mock Adapter返回404。

修正方式：

• 若测试中search是固定值，直接添加到mock参数里：

axiosMock
  .onGet('http://localhost:8000/api/v1/patients', {
    params: {
      page: 1,
      sort: 'workspace_patient_id',
      order: 'desc',
      search: '' // 匹配组件实际传递的search值
    },
  })
  .reply(200, mockResponse);

• 若search是动态值，使用参数匹配器忽略具体值：

axiosMock
  .onGet('http://localhost:8000/api/v1/patients', {
    params: {
      page: 1,
      sort: 'workspace_patient_id',
      order: 'desc',
      search: expect.anything() // 匹配任意search参数
    },
  })
  .reply(200, mockResponse);

3. 检查API函数的参数构造 #

确认getAllPatients函数里实际构造的请求参数键名和mock完全一致。比如要检查：

• 是不是把sort写成了sortField
• 是不是把order写成了direction
• 参数名是否大小写不匹配

示例API函数正确构造方式：

export const getAllPatients = (page, search, order, sortField) => {
  return apiInstance.get('/api/v1/patients', {
    params: {
      page: page,
      sort: sortField, // 键名必须和mock的"sort"一致
      order: order,
      search: search
    }
  });
};

4. 统一URL匹配逻辑 #

如果组件中设置了Axios的baseURL（比如http://localhost:8000），测试时应该用相对路径进行mock，避免完整URL不匹配：

axiosMock
  .onGet('/api/v1/patients', { // 使用相对路径
    params: { /* ... */ }
  })
  .reply(200, mockResponse);

调试技巧 #

若以上方法仍无法解决，可在测试中打印实际请求的URL和参数，对比mock配置：

// 临时添加，查看实际请求详情
axiosMock.onAny().reply(config => {
  console.log('实际请求URL:', config.url);
  console.log('实际请求参数:', config.params);
  return [404];
});

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