Vue2结合Jest测试，如何验证组件导入的外部函数被调用？

错误原因 #

你的测试未生效的核心原因是：trackFavorite 是组件脚本顶部直接从 @/utils/analytics 导入的独立函数，不属于Vue实例的属性/方法。你给wrapper.vm.trackFavorite赋值mock函数，和组件内部调用的trackFavorite完全是两个不同的引用，自然不会生效。

正确实现 #

使用Jest的模块Mock能力直接替换整个@/utils/analytics模块的导出，再引入mock后的trackFavorite做断言即可，完整测试代码如下：

import { shallowMount } from '@vue/test-utils';
import FavoriteButton from '../FavoriteButton'
// 引入mock后的工具方法
import { trackFavorite } from "@/utils/analytics";

// 全局mock整个analytics模块的导出
jest.mock('@/utils/analytics', () => ({
  trackFavorite: jest.fn()
}))

describe("FavoriteButton", () => {
  let wrapper

  beforeEach(() => {
    // 每次用例执行前清空mock的调用记录，避免多个用例互相污染
    trackFavorite.mockClear()
    wrapper = shallowMount(FavoriteButton)
  })

  describe('.onFavorite', () => {
    it('触发方法时正确调用trackFavorite', () => {
      // 方式1：直接调用实例方法校验逻辑
      wrapper.vm.onFavorite()
      // 方式2：模拟点击按钮，更贴近用户真实操作场景，可二选一
      // wrapper.find('button').trigger('click')
      
      // 断言mock方法被调用且参数符合预期
      expect(trackFavorite).toHaveBeenCalledTimes(1)
      expect(trackFavorite).toHaveBeenCalledWith("click", "favorite")
    })
  })
})

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