单元测试里怎么 mock 一个 axios 请求？

设计师春芹提问于 2026-03-03 15:43:20 阅读 6

前端

我在写 Jest 单元测试时，组件里用了 axios.get 请求数据，但每次跑测试都会真的发请求，特别慢还容易失败。试过用 jest.mock('axios')，但不知道怎么模拟返回值。

有没有人能给个简单的例子？比如我想让这个请求返回 { data: { id: 1 } }，该怎么写？

import axios from 'axios';
import { fetchData } from './api';

test('fetchData returns correct data', async () => {
  // 这里该怎么 mock axios？
  const result = await fetchData();
  expect(result.id).toBe(1);
});

我来解答赞 4 收藏

反馈

1 条解答

技术子涵 Lv1

别在测试里发真请求，那样跑起来慢得要死，而且网一挂测试就废了。用 Jest mock 掉 axios 其实很简单，核心就是用 mockResolvedValue 来指定返回的 Promise 结果。

你需要在文件顶部先 mock 掉整个 axios 模块，然后在测试用例里把 get 方法给劫持了，让它返回你想要的数据。

下面是改好的代码，直接拿去用：

import axios from 'axios';

import { fetchData } from './api';



// 1. 先把整个模块 mock 掉

jest.mock('axios');



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

  // 2. 指定 axios.get 的返回值，注意这里要 mockResolvedValue

  // 假设你的 fetchData 里面是 return res.data，那这里就返回 { data: { id: 1 } }

  axios.get.mockResolvedValue({ data: { id: 1 } });



  const result = await fetchData();

  expect(result.id).toBe(1);

});

这里有个坑要注意，mockResolvedValue 是模拟异步成功返回，如果你的业务代码里取的是 res.data，那你 mock 的时候结构得对上。如果直接 return 整个 response，那就把 data 去掉。写单测最烦的就是这层结构对不齐，debug 半天发现是数据包了一层，吐血。

写完记得跑一下，别光看。

2026-03-03 20:01