如何使用Jest模拟react-async库的useFetch Hook，在不发起真实API调用的情况下模拟data数据

嘿，我来给你梳理几种靠谱的方法，不用发起真实请求就能模拟useFetch返回的data，不管是测试还是开发调试都能用：

方法1：用Jest Mock整个useFetch（测试场景首选） #

如果是写组件测试，直接Mock react-async库的useFetch函数，让它返回你预设的模拟数据就行，完全不会触发真实API调用。

比如在测试文件顶部加上这段代码：

jest.mock('react-async', () => ({
  useFetch: jest.fn(() => ({
    data: [{ id: 1, name: 'Mock User' }, { id: 2, name: 'Another Mock User' }],
    isPending: false,
    run: jest.fn() // 把run也mock成空函数，避免报错
  }))
}));

这样你的Foo组件调用useFetch时，拿到的就是你定义好的data了。

方法2：动态Mock不同测试用例的返回值 #

如果需要在不同测试用例里返回不同的data，可以先把useFetchmock成一个空的jest函数，然后在每个测试用例里单独设置返回值：

// 先在测试文件顶部mock
jest.mock('react-async', () => ({
  useFetch: jest.fn()
}));

// 具体测试用例中
test('组件渲染正确的模拟用户数据', () => {
  // 定义当前用例的mock数据
  const mockUserData = [{ id: 1, name: 'Test User' }];
  
  // 设置useFetch的返回值
  require('react-async').useFetch.mockReturnValue({
    data: mockUserData,
    isPending: false,
    run: jest.fn()
  });

  // 接下来就可以渲染组件并断言渲染结果啦
});

方法3：开发调试时临时用initialData（无需改测试代码） #

如果只是开发阶段想调试组件，不想改测试代码，也可以直接在useFetch的配置里加上initialData和defer: true，这样不会自动发起请求，直接用你设置的初始数据：

function Foo(){ 
  const { data, isPending, run } = useFetch(`http://localhost:8080/users`, {
    defer: true, // 禁止自动发起请求
    initialData: [{ id: 1, name: 'Mock Dev User' }] // 预设模拟数据
  }); 
}

这种方法适合快速调试，不用动测试代码，调试完再把配置去掉就行。

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