如何在5分钟内上手Jest Fetch Mock：从安装到第一个测试用例

如何在5分钟内上手Jest Fetch Mock从安装到第一个测试用例【免费下载链接】jest-fetch-mockJest mock for fetch项目地址: https://gitcode.com/gh_mirrors/je/jest-fetch-mockJest Fetch Mock是一个专为Jest设计的fetch模拟工具每周在npm上的下载量约达140万次能帮助开发者轻松模拟HTTP请求快速编写可靠的测试用例。无论是前端还是Node.js环境它都能让你在不依赖真实网络的情况下测试API交互逻辑。 快速安装30秒完成配置1. 安装依赖包使用npm或yarn安装Jest Fetch Mock到开发依赖npm install --save-dev jest-fetch-mock2. 配置Jest两种方式任选方式一直接使用内置配置推荐在package.json中添加Jest配置jest: { setupFilesAfterEnv: [jest-fetch-mock/setup] }方式二自定义配置文件创建setupJest.js文件// setupJest.js require(jest-fetch-mock).enableMocks()然后在package.json中引用jest: { setupFilesAfterEnv: [./setupJest.js] }⚠️ 注意如果你的Jest配置中有resetMocks: true如Create React App默认设置请确保使用setupFilesAfterEnv而非setupFiles否则可能导致fetch模拟失效。✍️ 编写第一个测试用例3分钟上手假设我们有一个简单的API请求函数需要测试// api.js export async function fetchUserData(userId) { const response await fetch(https://api.example.com/users/${userId}); if (!response.ok) throw new Error(Failed to fetch user); return response.json(); }测试步骤创建测试文件api.test.js模拟API响应并断言结果验证请求参数是否正确// api.test.js import { fetchUserData } from ./api; describe(fetchUserData, () { // 每个测试前重置mock状态 beforeEach(() { fetch.resetMocks(); }); it(should return user data when request succeeds, async () { // 1. 模拟成功响应 const mockUserData { id: 1, name: John Doe }; fetch.mockResponseOnce(JSON.stringify(mockUserData), { status: 200 }); // 2. 执行测试函数 const result await fetchUserData(1); // 3. 断言结果 expect(result).toEqual(mockUserData); expect(fetch).toHaveBeenCalledWith(https://api.example.com/users/1); }); it(should throw error when request fails, async () { // 模拟失败响应 fetch.mockResponseOnce(, { status: 500 }); // 断言错误被抛出 await expect(fetchUserData(999)).rejects.toThrow(Failed to fetch user); }); }); 核心API速查表方法用途示例fetch.mockResponse(body, init)模拟所有fetch请求fetch.mockResponse({data: ok}, { status: 200 })fetch.mockResponseOnce(body, init)模拟单次fetch请求fetch.mockResponseOnce(not found, { status: 404 })fetch.mockReject(error)模拟请求失败fetch.mockReject(new Error(Network error))fetch.resetMocks()重置mock状态测试前必备beforeEach(() fetch.resetMocks())fetch.mock.calls获取请求历史记录expect(fetch.mock.calls[0][0]).toBe(/api/data) 新手常见问题解决Q: 为什么response.json()总是报错A:默认模拟响应体为空字符串而json()需要有效的JSON格式。解决方法// 至少返回空对象 fetch.mockResponse({}); // 或显式返回JSON fetch.mockResponse(JSON.stringify({ key: value }));Q: 如何模拟不同URL的响应A:使用函数式响应模拟fetch.mockResponse(async (req) { if (req.url.includes(/users)) { return JSON.stringify([{ id: 1 }]); } else if (req.url.includes(/posts)) { return JSON.stringify([{ title: Test }]); } return { status: 404, body: Not Found }; }); 进阶学习资源官方测试示例tests/test.js类型定义文件types/index.d.ts变更日志CHANGELOG.md通过以上步骤你已经掌握了Jest Fetch Mock的基本使用方法。这个工具不仅能帮你写出更可靠的测试还能让你在没有后端API的情况下进行前端开发极大提升开发效率现在就动手尝试为你的项目添加测试吧【免费下载链接】jest-fetch-mockJest mock for fetch项目地址: https://gitcode.com/gh_mirrors/je/jest-fetch-mock创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考