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

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

前端

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

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

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

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

我来解答赞 6 收藏

反馈

2 条解答

Designer°凌薇 Lv1

你这个问题简单，直接用 jest.mock 把 axios 换成假的就行。记得在测试里设置返回值。

jest.mock('axios', () => ({

  get: jest.fn().mockResolvedValue({ data: { key: 'mock value' } })

}));



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

  const result = await fetchData();

  expect(result).toEqual({ key: 'mock value' });

});

这代码直接拿去用，别想太多。记得 import 的时候 axios 要用默认导出的 mock 版本。老老实实写单元测试吧，别偷懒。

2026-03-30 21:09

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