0

0

如何在 Vitest 中正确 Mock 模块内联副作用函数

花韻仙語

花韻仙語

发布时间:2026-01-21 11:23:16

|

488人浏览过

|

来源于php中文网

原创

如何在 Vitest 中正确 Mock 模块内联副作用函数

维特(vitest)无法直接 mock 同一模块内的内部函数调用(如 `parent` 调用同模块的 `child`),因其导入绑定在模块初始化时已固化;解决方案是将被测副作用函数拆分到独立模块,再通过 `vi.mock()` 替换其导出。

在单元测试中,Mock 一个“副作用函数”(即具有日志、网络请求、状态变更等外部影响的函数)是常见需求。但许多开发者会遇到这样一个陷阱:试图用 vi.spyOn() 或 vi.mock() 去 Mock 当前模块内部定义并直接调用的函数,结果发现原始实现仍被执行——正如问题中 parent() 内部调用同模块的 child() 时,Spy 完全失效。

根本原因在于:Vitest(以及底层 ESM 模块机制)的 Mock 行为作用于模块导入关系,而非运行时函数引用。当 child() 在 dummy.ts 中被 parent() 直接调用时,它本质上是闭包内对本地变量的引用,不经过任何导入导出链,因此 vi.spyOn(dummy, 'child') 实际上是在 spy 一个已被静态解析并绑定的导出对象属性,而该属性在 parent() 执行路径中并未被访问(parent 直接调用的是词法作用域内的 child 函数,非 dummy.child)。

✅ 正确做法是解耦依赖:将 child() 提取至独立模块(如 dummy-child.ts),让 parent() 通过 import 显式依赖它。这样,Vitest 才能通过模块级 Mock 精准拦截调用:

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载
// dummy-child.ts
export function child(): string {
  console.log('calling actual child');
  return 'bar';
}
// dummy-parent.ts
import { child } from './dummy-child';

export function parent(): string {
  return `foo${child()}`;
}
// dummy-parent.test.ts
import { parent } from './dummy-parent';

vi.mock('./dummy-child', () => ({
  child: () => 'baz',
}));

describe('parent', () => {
  it('should return foobaz when child is mocked', () => {
    expect(parent()).toBe('foobaz'); // ✅ Passes
  });
});

⚠️ 注意事项:

  • vi.mock() 必须在 import 语句之后、测试用例之前调用(推荐置于文件顶部,紧随 imports 下方);
  • 使用 vi.mock() 的工厂函数形式(返回 mock 对象)比 vi.spyOn() 更可靠,因为它在模块加载前介入,确保所有导入都命中 Mock 版本;
  • 若需多次不同返回值或校验调用,可在工厂函数中返回带 mockImplementation 的 jest.fn():
    vi.mock('./dummy-child', () => {
      const mockChild = vi.fn().mockReturnValue('baz');
      return { child: mockChild };
    });
    // 后续可使用 expect(mockChild).toHaveBeenCalledTimes(1)
  • 切勿在 vi.mock() 工厂中执行实际业务逻辑或依赖未 Mock 的模块,否则可能引发循环依赖或意外副作用。

总结:Vitest 的 Mock 本质是“模块替换”,不是“函数劫持”。要 Mock 一个函数,它必须是被导入的依赖项。将副作用函数提取为独立模块,既是测试友好的设计,也符合单一职责与依赖倒置原则——这不仅是 Vitest 的 workaround,更是健壮前端架构的实践基石。

相关专题

更多
go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

135

2025.07.29

Python GraphQL API 开发实战
Python GraphQL API 开发实战

本专题系统讲解 Python 在 GraphQL API 开发中的实际应用,涵盖 GraphQL 基础概念、Schema 设计、Query 与 Mutation 实现、权限控制、分页与性能优化,以及与现有 REST 服务和数据库的整合方式。通过完整示例,帮助学习者掌握 使用 Python 构建高扩展性、前后端协作友好的 GraphQL 接口服务,适用于中大型应用与复杂数据查询场景。

1

2026.01.21

云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

22

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

29

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

170

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

125

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

41

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

14

2026.01.19

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 9万人学习

CSS3 教程
CSS3 教程

共18课时 | 4.7万人学习

Vue 教程
Vue 教程

共42课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号