如何在非Expo的React Native项目中用Jest模拟axios GET请求？

嘿，我来帮你搞定Jest里模拟axios请求的事儿！针对你说的axios({method: "GET", url:"/something"})这种调用方式，我给你整理了两种常用的方案，都是非Expo React Native项目里能用的：

这是最直接的方式，适合全局模拟axios的所有调用：

• 首先在测试文件顶部，导入axios和你要测试的组件/函数：

import axios from 'axios';
import TargetComponent from '../TargetComponent'; // 换成你实际的组件路径

• 接着用Jest的jest.mock()来Mock整个axios模块，然后在测试用例里指定它的返回结果：

jest.mock('axios');

describe('测试目标组件', () => {
  it('能正确发起GET请求并处理响应', async () => {
    // 定义模拟的接口返回数据
    const mockResponseData = { data: { message: '请求成功啦' } };
    // 让axios调用返回一个成功的Promise
    axios.mockResolvedValue(mockResponseData);

    // 执行你的测试逻辑，比如渲染组件（如果请求是在组件挂载时触发的）
    render(<TargetComponent />);

    // 断言axios是否被按预期调用
    expect(axios).toHaveBeenCalledWith({
      method: 'GET',
      url: '/something'
    });

    // 还可以断言组件是否正确渲染了返回的数据，比如：
    // expect(screen.getByText('请求成功啦')).toBeInTheDocument();
  });

  it('能正确处理请求失败的情况', async () => {
    // 模拟请求失败的场景
    axios.mockRejectedValue(new Error('服务器开小差了'));

    // 执行测试逻辑...

    // 这里可以断言错误提示是否显示，或者相关状态是否正确
  });
});

这种方式更灵活，适合只模拟特定场景下的axios调用，不会影响其他测试用例：

import axios from 'axios';
import TargetComponent from '../TargetComponent';

describe('测试目标组件', () => {
  let axiosCallSpy;

  // 每个测试用例前创建spy
  beforeEach(() => {
    axiosCallSpy = jest.spyOn(axios, 'default')
      .mockResolvedValue({ data: { message: '请求成功啦' } });
  });

  // 每个测试用例后清理spy，避免污染其他测试
  afterEach(() => {
    axiosCallSpy.mockRestore();
  });

  it('发起的GET请求参数正确', async () => {
    // 执行测试逻辑，比如渲染组件
    render(<TargetComponent />);

    // 断言调用是否符合预期
    expect(axiosCallSpy).toHaveBeenCalledWith({
      method: 'GET',
      url: '/something'
    });
  });
});

小提醒 #

• 确保你的项目已经装好了Jest和React Native测试相关依赖（比如@testing-library/react-native），如果没装的话用npm/yarn补装就行。
• 如果你的请求里还有额外配置（比如headers、query参数），记得在toHaveBeenCalledWith里把这些也加上，保证断言的准确性。
• 要是你是在纯函数里调用axios，测试逻辑也类似——直接调用函数，然后断言axios的调用情况就好。

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