如何用Vitest测试Vue组件中函数内部调用的外部导入函数

这个问题我碰到过，核心原因是你要测试的openURLInBrowser并不是Vue组件实例上的方法，而是从外部文件导入的独立函数，所以直接在wrapper.vm上spy肯定找不到它。下面给你具体的解决步骤：

1. 先mock外部导入的模块 #

在你的测试文件顶部，用Vitest的vi.mock方法来模拟整个openURLInBrowser.ts模块，这样组件里导入的openURLInBrowser就会变成我们的mock函数，方便追踪调用情况。

示例代码：

// 先导入目标函数（会被mock覆盖）
import { openURLInBrowser } from '@/path/to/openURLInBrowser'
// 替换成你的实际文件路径

// mock整个模块
vi.mock('@/path/to/openURLInBrowser', () => ({
  openURLInBrowser: vi.fn() // 创建一个空的mock函数
}))

2. 编写测试用例验证调用逻辑 #

接下来在测试用例里，触发组件的点击事件后，直接断言我们的mock函数是否被正确调用即可。注意要确保你传入的linkDataStructure里的type是onetype或者twotype，这样才能触发switch分支里的逻辑。

示例代码：

test('当type为onetype时，点击链接会调用openURLInBrowser', async () => {
  const wrapper = shallowMount(MyLinks, {
    propsData: {
      // 确保这里的myLinks数据中，对应的type是'onetype'
      myLinks: linkDataStructure
    }
  })

  const linkElement = wrapper.find('a')
  await linkElement.trigger('click')

  // 断言mock函数被调用，并且参数正确
  expect(openURLInBrowser).toHaveBeenCalledWith(expect.any(String), '_blank')
  // 如果知道具体的url，也可以断言具体值：expect(openURLInBrowser).toHaveBeenCalledWith('你的目标URL', '_blank')
})

额外测试场景：非目标type的情况 #

如果你还想验证当type不是onetype/twotype时，openURLInBrowser不会被调用，可以单独写一个测试用例：

test('当type为其他值时，点击链接不会调用openURLInBrowser', async () => {
  const wrapper = shallowMount(MyLinks, {
    propsData: {
      // 传入type为其他值的测试数据
      myLinks: { ...linkDataStructure, type: 'othertype' }
    }
  })

  const linkElement = wrapper.find('a')
  await linkElement.trigger('click')

  expect(openURLInBrowser).not.toHaveBeenCalled()
})

注意事项 #

• vi.mock会自动提升到测试文件的最顶部执行，所以不用担心导入顺序的问题
• 如果你需要在不同测试用例中重置mock函数的调用记录，可以在beforeEach里调用openURLInBrowser.mockClear()

备注：内容来源于stack exchange，提问作者mikasa