如何用Jest测试Axios POST请求？提交函数测试遇网络错误

问题根源 #

你的测试出现网络连接拒绝和网络错误，核心原因有三个：

• 没有正确Mock Axios的post方法，导致测试时触发了真实的HTTP请求；
• 调用onSubmit时传参不符合原函数定义（原函数接收表单data，而非url和method）；
• 未处理window.location的操作，可能干扰测试执行。

修正步骤及完整代码 #

1. 正确Mock Axios #

需要Mock Axios的post方法并返回一个已解决的Promise，彻底避免真实网络请求：

jest.mock('axios', () => ({
  post: jest.fn().mockResolvedValue({ data: {} }) // 模拟请求成功的返回结果
}));

2. Mock window.location相关属性 #

原函数依赖window.location.origin和replace方法，测试时需Mock这些属性避免环境干扰：

beforeEach(() => {
  // 重置Mock状态
  axios.post.mockClear();
  // 重新定义window.location
  delete window.location;
  window.location = {
    origin: 'http://localhost:3000',
    replace: jest.fn()
  };
});

3. 修正测试用例的调用逻辑 #

按照原函数的参数要求，传入测试用的表单数据，而非错误的url和method。

完整修正后的测试代码 #

import CreateMovie from '../create.js';
import axios from 'axios';

describe('CreateMovie', () => {
  // 全局Mock Axios的post方法
  jest.mock('axios', () => ({
    post: jest.fn().mockResolvedValue({ data: {} })
  }));

  beforeEach(() => {
    // 每次测试前重置Mock
    axios.post.mockClear();
    // Mock window.location
    delete window.location;
    window.location = {
      origin: 'http://localhost:3000',
      replace: jest.fn()
    };
  });

  it('Should send correct data and trigger redirect', async () => {
    // 构造测试用的表单数据
    const testFormData = { title: 'Test Movie', genre: 'Action' };
    // 调用onSubmit方法
    await CreateMovie.onSubmit(testFormData);
    
    // 断言Axios post被正确调用，参数符合预期
    expect(axios.post).toHaveBeenCalledWith(
      'http://localhost:3000/movies/api/resources',
      testFormData
    );
    // 断言页面跳转逻辑被触发
    expect(window.location.replace).toHaveBeenCalledWith('/movies/resources');
  });
});

关键说明 #

• 不要直接将整个axios Mock为函数，必须Mock它的post方法，确保原函数调用的是Mock版本而非真实Axios；
• 测试时要严格按照原函数的参数定义传参，避免传错参数导致逻辑异常；
• Mockwindow.location可以避免测试过程中出现真实页面跳转或环境不兼容问题。

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