如何测试Vue组件方法中调用的外部initOpinionLab函数？

首先，咱们来分析你遇到的错误："Cannot spy the initOpinionLab property because it is not a function; undefined given instead"。问题出在你尝试监听wrapper.vm.initOpinionLab，但组件实例上根本没有这个方法——initOpinionLab是你从外部模块导入的独立函数，组件的launchOpinionLab只是调用了这个导入的函数，并没有把它挂载到组件实例上。所以spyOn组件实例的这个属性自然会失败。

正确的测试方案 #

要断言initOpinionLab被正确调用，我们需要直接mock这个导入的模块，然后验证mock函数的调用情况。同时，因为initOpinionLab依赖全局的window.OOo对象，测试时也需要提前mock这个全局对象，避免运行时报错。

步骤1：Mock导入的模块和全局对象

在你的测试文件顶部，先mockinitOpinionLab模块，同时在测试前后处理window.OOo的模拟和清理：

import YourComponent from './YourComponent.vue';
import initOpinionLab from './initOpinionLab';
import { mount } from '@vue/test-utils';

// 模拟initOpinionLab模块，返回一个jest mock函数
jest.mock('./initOpinionLab', () => jest.fn());

// 全局mock window.OOo
beforeEach(() => {
  window.OOo = {
    // 模拟inlineFeedbackShow方法
    inlineFeedbackShow: jest.fn(),
    // 模拟Ocode构造函数，返回带有show方法的对象
    Ocode: jest.fn().mockReturnValue({ show: jest.fn() })
  };
});

// 测试后清理mock和全局对象
afterEach(() => {
  delete window.OOo;
  jest.clearAllMocks();
});

步骤2：编写测试用例

现在可以编写测试，验证initOpinionLab是否被传入正确参数调用：

it('[positive] initOpinionLab should be called with correct props when launchOpinionLab is triggered', () => {
  // 定义测试用的props值
  const testProps = {
    clientId: 'mock-client-id',
    flow: 'mock-flow',
    srcCorrelationId: 'mock-correlation-id'
  };

  // 挂载组件，传入测试props
  const wrapper = mount(YourComponent, {
    props: testProps
  });

  // 调用组件的launchOpinionLab方法
  wrapper.vm.launchOpinionLab();

  // 断言initOpinionLab被调用，且参数正确
  expect(initOpinionLab).toHaveBeenCalledWith({
    clientId: testProps.clientId,
    flow: testProps.flow,
    srcCorrelationId: testProps.srcCorrelationId
  });

  // 额外：可以断言window.OOo.inlineFeedbackShow也被调用了
  expect(window.OOo.inlineFeedbackShow).toHaveBeenCalled();
});

关于将initOpinionLab移到mounted钩子的问题 #

把initOpinionLab的调用移到mounted钩子中，是否更便于测试？这取决于你的业务逻辑：

• 如果initOpinionLab是页面加载时就需要初始化的逻辑，移到mounted确实会让测试更简单——你只需要挂载组件，无需手动调用方法，就能触发initOpinionLab的调用，测试用例会更简洁。
• 如果initOpinionLab是需要在用户交互（比如点击按钮）时才触发的，那保留在methods里更合理，测试时手动触发交互即可。

无论放在哪里，测试的核心逻辑都是一样的：mock导入的initOpinionLab模块，验证它的调用参数和次数。

内容的提问来源于stack exchange，提问作者Kevin T.