JS 中怎么在 Vitest 中使用 vi.mock 和 vi.spyOn 进行高效模拟-js教程-PHP中文网

vitest 中 vi.mock 用于模块级依赖替换，vi.spyon 用于运行时函数行为劫持；前者需顶层声明、仅对 es 模块生效，后者须作用于可访问对象属性并注意清理。

js 中怎么在 vitest 中使用 vi.mock 和 vi.spyon 进行高效模拟

在 Vitest 中高效模拟，关键不是“用哪个 API”，而是“在什么场景下用对的工具”。vi.mock 和 vi.spyOn 解决的是两类不同层级的问题：一个是模块级依赖替换，一个是运行时函数行为劫持。用错地方，测试就容易失效或难以维护。

vi.mock：用于替换整个模块的导入行为

当你需要让某个被测模块（比如 parent.ts）在加载时，把它的 import { child } from './child' 自动指向你定义的假实现，就必须用 vi.mock()。它在模块解析阶段介入，确保所有 import 都命中 mock 版本。

必须写在文件顶层，且在目标模块 import 之后、测试之前（推荐紧接 imports 下方）
只对 ES 模块（import/export）生效；若项目混用 require，vi.mock 会静默失效
工厂函数返回的对象，会完全覆盖原模块导出 —— 不用再手动 mockReturnValue，直接返回值或 mock 函数都行
适合模拟 API 调用、工具库、副作用函数等外部依赖

示例：

  // api.ts
  export async function fetchUser(id) {
    const res = await fetch(`/users/${id}`);
    return res.json();
  }

  // api.test.ts
  import { fetchUser } from './api';
  vi.mock('./api', async (importActual) => {
    const actual = await importActual();
    return {
      ...actual,
      fetchUser: vi.fn().mockResolvedValue({ id: 1, name: 'Alice' }),
    };
  });

  it('returns mocked user', async () => {
    expect(await fetchUser(1)).toEqual({ id: 1, name: 'Alice' });
    expect(fetchUser).toBeCalledTimes(1);
  });

vi.spyOn：用于观测或临时修改已有对象上的方法

vi.spyOn 不是“模拟模块”，而是“监听一个已存在引用的方法”。它适合验证某函数是否被调用、传了什么参数、调用了几次，或者临时改掉某个对象身上的方法（比如全局 console、第三方实例方法）。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

作用对象必须是可访问的变量/属性，例如 console.log、Math.random、instance.method
对模块内部直调（如 parent() 内部直接调 child()）无效 —— 因为那不是通过对象属性访问的
记得用 .mockRestore() 清理，否则可能污染其他测试
常用于打桩全局副作用、校验日志、拦截类方法调用

示例：

  it('logs warning when input is empty', () => {
    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});

    validateInput('');

    expect(warnSpy).toBeCalledWith('Input cannot be empty');
    warnSpy.mockRestore();
  });