Jest 测试中如何模拟 axios 的异步请求？

慕容爱香提问于 2026-03-04 23:04:18 阅读 5

前端

我在用 Jest 写单元测试，组件里用了 axios 发请求，但每次测试都真的发出去了，还报错。我想 mock 掉 axios，但不知道怎么正确模拟异步返回。

试过用 jest.mock('axios')，但数据没生效。比如我这个函数：

const fetchData = async () => {
  const res = await axios.get('/api/data');
  return res.data;
}

该怎么写测试才能让它返回我想要的 mock 数据？

我来解答赞 1 收藏

反馈

1 条解答

IT人淑怡 Lv1

来，我教你个干净的mock方式。jest.mock('axios')是对的，但你可能没正确配置返回值。

假设你要测试的fetchData函数就是上面那样，测试可以这样写：

import axios from 'axios';

import { fetchData } from './yourModule';



jest.mock('axios');



test('fetchData returns mock data', async () => {

  // 模拟axios.get返回的数据结构

  axios.get.mockResolvedValue({

    data: { id: 1, name: 'mock data' }

  });



  const result = await fetchData();

  expect(result).toEqual({ id: 1, name: 'mock data' });

  expect(axios.get).toHaveBeenCalledWith('/api/data');

});

几个关键点：
1. 记得在测试文件顶部jest.mock('axios')
2. mockResolvedValue是用来模拟异步resolve的，比直接mockReturnValue更准确
3. 最后可以验证axios.get是否被正确调用

如果你要模拟错误情况，用mockRejectedValue：

axios.get.mockRejectedValue(new Error('network error'));

这样写测试不会真的发请求，而且能覆盖各种返回情况。

2026-03-05 06:01