Jest测试中如何访问Mock模块实例？验证Highcharts扩展调用次数

我来帮你解决这个问题——要验证funnel函数是否只被调用一次，核心是正确Mock相关模块并获取到Mock函数的引用，下面分两种常用的前端测试框架来一步步说明：

如果你用的是Jest（最主流的前端测试框架） #

首先得正确Mock Highcharts和funnel模块，然后就能直接通过Mock的引用来验证调用次数。

步骤1：编写Mock逻辑 #

假设你的业务代码是这样引入和使用的：

// 业务代码示例：YourChartComponent.js
import Highcharts from 'highcharts';
import funnel from 'highcharts/modules/funnel';

// 初始化时扩展Highcharts
funnel(Highcharts);

export default {
  // 你的组件逻辑
};

那在测试文件里，我们可以这样Mock：

// 先Mock Highcharts，返回一个空对象（如果你的业务代码用到了Highcharts的其他方法，可以在这里补充对应的Mock）
jest.mock('highcharts', () => ({}));

// 把funnel模块Mock成一个Jest的Mock函数，这样我们就能追踪它的调用情况
jest.mock('highcharts/modules/funnel', () => jest.fn());

步骤2：验证调用次数 #

接下来在测试用例里，只要引入待测试模块和Mock的funnel，就能直接验证：

import Highcharts from 'highcharts';
import funnel from 'highcharts/modules/funnel';
import YourChartComponent from './YourChartComponent';

describe('Highcharts Funnel 扩展验证', () => {
  // 每次测试前重置Mock的调用记录，避免不同测试用例互相干扰
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('funnel函数应该只被调用一次，避免重复扩展异常', () => {
    // 因为业务代码在模块加载时就执行了funnel(Highcharts)，所以import组件后就会触发这个调用
    // 如果你的funnel是在某个初始化函数里调用的，这里要手动触发：比如 YourChartComponent.init()

    // 验证调用次数
    expect(funnel).toHaveBeenCalledTimes(1);
    // 还可以验证是否传入了正确的Highcharts实例
    expect(funnel).toHaveBeenCalledWith(Highcharts);
  });
});

如果你用的是Mocha + Sinon #

如果你的项目用Mocha搭配Sinon做测试，思路类似，只是Mock的方式略有不同：

import sinon from 'sinon';
import Highcharts from 'highcharts';
import YourChartComponent from './YourChartComponent';

// 引入funnel模块并替换为Sinon的Mock函数
const funnelModule = require('highcharts/modules/funnel');
const funnelMock = sinon.stub(funnelModule, 'default').callsFake(() => {});

describe('Highcharts Funnel 扩展验证', () => {
  afterEach(() => {
    // 测试结束后恢复原函数，避免影响其他测试
    funnelMock.restore();
  });

  it('funnel函数应该只被调用一次', () => {
    // 触发业务代码中的funnel调用（如果是模块加载时自动执行，这一步可能不用做）
    // YourChartComponent.init();

    // 用Sinon的断言验证调用次数
    sinon.assert.calledOnce(funnelMock);
    sinon.assert.calledWith(funnelMock, Highcharts);
  });
});

几个关键注意点 #

• Mock时机要早：一定要在引入待测试模块之前完成Mock，否则业务代码会加载真实的Highcharts和funnel模块，导致Mock失效。
• 重置Mock记录：每次测试前记得清空Mock的调用记录，避免上一个测试的调用结果影响当前测试。
• 按需补充Mock属性：如果你的业务代码用到了Highcharts的其他方法（比如Highcharts.chart），记得在Mock Highcharts对象时补充对应的Mock函数，避免测试报错。

内容的提问来源于stack exchange，提问作者Dominik