Axios
Axios 是一个基于 Promise 的 JavaScript HTTP 客户端，可在前端应用程序和 Node.js 后端中使用。
如何在 Jest 中测试 API 调用和网络请求？如何 Mock fetch 和 Axios？在 Jest 中测试 API 调用和网络请求需要使用 Mock 来隔离外部依赖：
**1. Mock fetch API：**
```javascript
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ data: 'test' })
})
);
test('fetches data from API', async () => {
const data = await fetchData();
expect(data).toEqual({ data: 'test' });
expect(fetch).toHaveBeenCalledTimes(1);
});
```
**2. Mock Axios：**
```javascript
import axios from 'axios';
jest.mock('axios');
test('fetches user data', async () => {
const mockData = { name: 'John', age: 30 };
axios.get.mockResolvedValue({ data: mockData });
const result = await getUser(1);
expect(result).toEqual(mockData);
expect(axios.get).toHaveBeenCalledWith('/users/1');
});
```
**3. Mock 模块导出：**
```javascript
// api.js
export const fetchData = () => fetch('/api/data');
// api.test.js
import { fetchData } from './api';
import fetch from 'node-fetch';
jest.mock('node-fetch');
test('fetches data', async () => {
fetch.mockResolvedValue({ json: () => ({ data: 'test' }) });
const result = await fetchData();
expect(result).toEqual({ data: 'test' });
});
```
**4. 测试错误处理：**
```javascript
test('handles API errors', async () => {
axios.get.mockRejectedValue(new Error('Network Error'));
await expect(getUser(1)).rejects.toThrow('Network Error');
});
```
**5. 测试不同的响应状态：**
```javascript
test('handles 404 error', async () => {
axios.get.mockRejectedValue({
response: { status: 404, data: { message: 'Not found' } }
});
await expect(getUser(1)).rejects.toMatchObject({
response: { status: 404 }
});
});
```
**6. 使用 MSW（Mock Service Worker）：**
```javascript
import { rest } from 'msw';
import { setupServer } from 'msw/node';
const server = setupServer(
rest.get('/api/users', (req, res, ctx) => {
return res(ctx.json({ name: 'John' }));
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
test('fetches user with MSW', async () => {
const user = await fetchUser();
expect(user).toEqual({ name: 'John' });
});
```
**最佳实践：**
- 使用 Mock 隔离外部 API 依赖
- 测试成功和失败场景
- 验证请求参数和响应处理
- 清理 Mock 以避免测试污染
- 考虑使用 MSW 进行更真实的 API 模拟
前端 · 2月19日 19:55