使用axios-mock-adapter测试请求reject场景及覆盖率问题如何解决

问题根因 #

• 依赖包名拼写错误：代码中导入的axios-moc-adapter拼写缺失字母k，正确包名为axios-mock-adapter，拼写错误会导致MockAdapter实例异常，调用方法后返回非Promise类型值，触发Cannot read properties of undefined (reading 'then')报错。
• 错误信息断言值不匹配：axios-mock-adapter调用networkError()抛出的默认错误对象的message属性值为Network Error，而非测试代码中写的message。
• 缺少测试清理逻辑：每次测试用例执行完成后没有重置axios mock，可能导致不同用例的mock配置互相干扰，也会出现catch分支未正常触发的问题。

修复后测试代码 #

import axios from 'axios';
// 修正包名拼写
const MockAdapter = require('axios-mock-adapter');
// 替换为你实际的service导入路径
const service = require('./service');

describe('getData', () => {
  let mock;
  // 每次测试前初始化mock实例
  beforeEach(() => {
    mock = new MockAdapter(axios);
  });
  // 每次测试后重置mock配置，避免用例间干扰
  afterEach(() => {
    mock.reset();
  });

  it('test success', async () => {
    mock.onGet(`${service.baseURL}/sites`).reply(200, 'success');
    const axiosSpy = jest.spyOn(axios, 'get');

    const rtn = await service.getData('/sites');

    expect(axiosSpy).toHaveBeenCalled();
    expect(rtn).toBe('success');
    axiosSpy.mockRestore();
  });

  it('test failure', async () => {
    // 声明该用例至少要执行1次断言，避免catch分支未执行时测试误判通过
    expect.assertions(1);
    mock.onGet(`${service.baseURL}/sites`).networkError();
    
    try {
      await service.getData('/sites');
    } catch (err) {
      // 匹配axios-mock-adapter默认的网络错误信息
      expect(err.message).toBe('Network Error');
    }
  });
});

修改完成后执行测试，应用代码里的catch分支会被正常触发，覆盖率工具可以正常统计到这部分代码的执行记录。

内容的提问来源于stack exchange，提问作者Tim B.