使用 Jest mockReturnValue 为 Mock 函数注入返回值——TIL 项目 JavaScript 实战笔记-北京尧图网络

文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本篇技术指南聚焦 TIL 仓库 javascript/mock-a-function-with-return-values-using-jest 所记录的核心技巧如何用jest.fn()创建 Mock 函数并通过mockReturnValue()/mockReturnValueOnce()为它注入固定或一次性返回值从而让被测代码在无需真实依赖的情况下稳定运行。读完本文你将掌握 Mock 函数从创建、赋值、注入返回值到落地到组件测试与定时器测试的完整链路并了解它与mockImplementation、mockResolvedValue等姊妹 API 的关系。一、起步用 jest.fn() 创建 Mock 函数Jest 为处理 Mock 函数提供了一整套工具集合Mock Function API其中最基础的入口就是jest.fn()。调用它即可得到一个全新的 Mock 函数该函数本身不执行任何业务逻辑而是由测试代码按需配置其行为。jest.fn() // 赋值给一个变量 const fakeFunc jest.fn(); // 作为 prop 传给组件 SpecialInput handleChange{jest.fn()} /从上面的三行代码可以看到jest.fn()的三种典型用法直接调用生成一个未绑定的 Mock 函数实例赋值给变量将 Mock 函数保存为fakeFunc后续可以通过该变量统一配置返回值、调用次数等行为作为 prop 传入组件在渲染组件时传入一个 Mock 函数如上面的handleChange用于占位并观测组件是否正确调用了该回调。这一点在 TIL 仓库的 react/mock-a-function-that-a-component-imports 中有直接的印证——当组件依赖一个导入的函数isAuthenticated()时测试中正是用jest.fn().mockReturnValue(true)来替换真实实现而在 xstate/custom-jest-matcher-for-xstate-machine-states 中XState 机器的action: jest.fn()同样以 Mock 函数来观测动作是否被触发。二、mockReturnValue()让 Mock 函数始终返回指定值创建出 Mock 函数之后下一步就是为它配置返回值。最常用的方法是mockReturnValue(value)const fakeFunc jest.fn(); fakeFunc.mockReturnValue(hello); fakeFunc(); // hellomockReturnValue()的核心语义是无论函数被调用多少次只要没有更优先的一次性配置它都会返回同一个值。在上述示例中fakeFunc每次被调用都会得到字符串hello测试代码无需关心函数内部逻辑只需确认当这个函数被调用时它会返回什么这正是单元测试隔离外部依赖的关键手法。这种恒定返回值在真实测试场景中极其常用。TIL 仓库的 react/mock-a-function-that-a-component-imports 给出了一个完整的落地案例// MyComponent.test.js // ... various testing imports import * as authModules from ./authentication; it(renders the component, () { authModules.isAuthenticated jest.fn().mockReturnValue(true); const wrapper shallow(MyComponent /); expect(toJson(wrapper)).toMatchSnapshot(); });这里通过import * as authModules拿到与MyComponent相同的模块引用把isAuthenticated替换为jest.fn().mockReturnValue(true)的 Mock 版本。于是渲染MyComponent时组件内部调用到的isAuthenticated()会返回true从而走入已认证分支测试无需真实登录态。反向场景只需要把返回值换成falseauthModules.isAuthenticated jest.fn().mockReturnValue(false);一句话总结mockReturnValue()的价值在于凡调用必返回让依赖方在固定前提下被稳定驱动。三、mockReturnValueOnce()让返回值只生效一次与mockReturnValue()相对mockReturnValueOnce(value)只让指定返回值生效一次随后的调用不再返回该值const fakeFunc jest.fn(); fakeFunc.mockReturnValueOnce(hello); fakeFunc(); // hello fakeFunc(); // nullmockReturnValueOnce()的语义是第一次调用时返回配置值之后回落到 Mock 函数的默认行为。这里有一个容易被忽略的细节需要澄清在 Jest 中未配置任何返回值/实现的 Mock 函数其默认调用结果实际上是undefined而不是null原始笔记以null概括此后不再返回任何配置值这一结果读者理解其意图即可在编写断言时请以实际默认值undefined为准。该 API 最典型的用途是模拟前几次调用返回特殊值的场景例如模拟轮询接口第一次返回处理中后续返回已完成模拟数据库查询某次查询命中缓存返回 A其余返回 B模拟需要多次调用才稳定的第三方 SDK。四、组合运用默认返回值一次性覆盖mockReturnValue()与mockReturnValueOnce()并不互斥二者组合可以表达大部分调用返回默认值仅某几次调用返回特殊值的行为const fakeFunc jest.fn(); fakeFunc .mockReturnValue(default) .mockReturnValueOnce(first) .mockReturnValueOnce(second); fakeFunc(); // first fakeFunc(); // second fakeFunc(); // default fakeFunc(); // default组合时的优先级规则是一次性配置Once系列总是先于永久配置mockReturnValue系列被消费。所有Once值按注册顺序依次消耗完毕后函数才回落到mockReturnValue设置的恒定值。这一规则让先特殊、后通用的测试编排变得非常直观。五、仓库实例Mock 函数在定时器与日志测试中的落地除了注入返回值jest.fn()的调用记录能力也是断言的核心依据。TIL 仓库的 javascript/test-timing-based-code-with-jest-fake-timers 展示了jest.fn()与假定时器配合、用toHaveBeenCalled()验证调用是否发生的完整流程jest.useFakeTimers(); describe(doSomethingAfter200ms, () { test(does something after 200ms (pass), () { const doSomething jest.fn(); doSomethingAfter200ms(doSomething); jest.advanceTimersByTime(201); expect(doSomething).toHaveBeenCalled(); }); });这里doSomething无需关心返回值——Mock 函数同时具备可配置行为与可观测调用历史两种能力。类似的模式还出现在 javascript/turn-off-console-error-messages-in-a-test 中通过console.error jest.fn()屏蔽测试期的噪音输出。结合这两个仓库实例可以得出jest.fn()是注入返回值记录调用历史的统一入口而mockReturnValue只是它众多行为配置中的一支。六、延伸mockReturnValue 的姊妹 APImockReturnValue与mockReturnValueOnce属于 Jest Mock Function API 家族理解它们后可以顺带掌握同族的其他常用成员它们共享永久/一次性与普通值/异步值两对维度的组合逻辑API语义mockReturnValue(value)每次调用都返回该值本文主题mockReturnValueOnce(value)仅下一次调用返回该值本文主题mockImplementation(fn)用自定义函数完全接管 Mock 函数的行为mockImplementationOnce(fn)仅下一次调用使用自定义实现mockResolvedValue(value)等价于mockImplementation(() Promise.resolve(value))用于返回已兑现的 PromisemockResolvedValueOnce(value)仅下一次调用返回已兑现的 PromisemockRejectedValue(value)等价于mockImplementation(() Promise.reject(value))用于模拟异步失败选择建议当被测代码只需要知道返回值时优先用mockReturnValue系列更简洁当需要模拟真实逻辑或异步行为时再考虑mockImplementation与mockResolvedValue系列。配合toHaveBeenCalled()、toHaveReturnedWith(value)等断言即可对返回值是否被正确注入、调用是否发生做完整的双向验证。小结围绕 TIL 仓库 javascript/mock-a-function-with-return-values-using-jest 这篇笔记本文完整覆盖了jest.fn()创建 Mock 函数的三种方式、mockReturnValue()的恒定返回值语义、mockReturnValueOnce()的一次性语义及回落后返回undefined的细节并补充了二者组合时的优先级规则。结合仓库中 react/mock-a-function-that-a-component-imports、javascript/test-timing-based-code-with-jest-fake-timers 与 javascript/turn-off-console-error-messages-in-a-test 的实战样例可以看到注入返回值只是 Mock 函数能力的入口配合调用历史断言与一次性覆盖足以支撑绝大多数前端与 Node 侧单元测试场景。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐rust-bert 在生产环境中的应用案例从初创公司到大型企业的成功实践rust bert 在生产环境中的应用案例从初创公司到大型企业的成功实践 rust bert 是一个基于 Rust 语言的原生自然语言处理NLP框架它提人工智能深度学习大模型30 Seconds of Code 实战用 debouncePromise 为 JavaScript 防抖函数返回 Promise30 Seconds of Code 实战用 debouncePromise 为 JavaScript 防抖函数返回 Promise 本文以 30 secon教程文档深入解析 freeCodeCamp Basic JavaScript 课程用 return 语句返回函数值深入解析 freeCodeCamp Basic JavaScript 课程用 return 语句返回函数值本文围绕 freeCodeCamp 开源课程 Ba前端后端教育上一篇Austin项目实战指南下一篇Anima开源项目使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

使用 Jest mockReturnValue 为 Mock 函数注入返回值——TIL 项目 JavaScript 实战笔记

相关推荐

Tesla P4与ShanaEncoder：低成本硬件转码实战指南

EMC整改实战：传导辐射静电问题定位与解决

Go2机器人接入Livox Mid360点云的ROS2实战指南

更多资讯

OpenShell开始菜单替代工具：安装配置与进阶玩法全解析

Agent-Reach 实战：把 AI Agent 拉进命令行的落地指南

大学生抑郁分析与预测全流程：问卷数据、特征工程与模型评估实战

OpenShell：跨平台终端工作台，统一shell配置与插件生态

CentOS 7搭建IC设计环境：Cadence IC617+MMSIM151+Calibre2015实战

鸿蒙设备跑起Flutter轻量级后端：get_server适配实战与排坑指南

今日更新

Multisim仿真NE555 PWM控制器：从搭电路到调占空比全流程

S32K312 AUTOSAR BSW开发实战：从配置踩坑到烧录交付

双目视觉三维人脸重建：从视差图到点云粗配准全流程解析

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

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