如何在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），仅供参考

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

相关推荐

ML Privacy Meter与GDPR合规：数据保护影响评估指南

探索量子化学计算新维度：xtb半经验紧束缚方法实战指南

C++函数进阶：从性能优化到异常安全的工程实践

更多资讯

工业AI网络底座是什么？从TSN到边缘通道的关键能力解析

免费网站统计工具的隐藏限制有哪些？我踩过的 8 个坑一次讲清

OpenClaw 命令大全以及使用指南：TaoToken 统一 Key 接入配置实战

2026数据库学习路线：从行业现状到热搜词实战拆解

数据中心柴发出口断路器Emax选型整定实战指南

Windows 微博图床工具与 picgo VSCode 插件版：TaoToken 统一 Key 配置实战

今日更新

BunnyScholar硕士论文跨章节检查：长文档双栏如何梳理因果链

维普标红教育学SEM量表怎么办：助研君修改与RMSEA指标复核

知网标红有限元仿真与网格划分怎么办：助研君按字修改与参数复核

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？