如何在Nuxt.js中测试navigateTo函数是否被调用？

要验证组件中navigateTo是否被正确调用，核心是让测试环境中的组件能访问到你定义的mock函数，以下是两种可行方案：

方案一：使用Nuxt官方测试工具mock全局导入 #

Nuxt的@nuxt/test-utils提供了mockNuxtImport方法，可以直接mock Nuxt的全局工具函数，步骤如下：

1. 确保已安装依赖：

npm install -D @nuxt/test-utils

2. 在测试文件中mock并执行测试：

import { mount, mockNuxtImport } from '@nuxt/test-utils/vitest'
import Form from './Form.vue'

const navigateToMock = vi.fn()
// 提前mock navigateTo的导入
mockNuxtImport('navigateTo', () => navigateToMock)

it('点击提交后跳转到指定路径', async () => {
  const wrapper = mount(Form)

  await wrapper.find("[data-testid='login']").trigger('submit')
  await flushPromises()

  expect(navigateToMock).toHaveBeenCalledWith('/')
})

方案二：手动注入全局mock #

如果不想依赖Nuxt测试工具，可以通过Vue Test Utils的global.mocks选项，将mock函数注入组件的全局上下文：

import { mount } from '@vue/test-utils'
import Form from './Form.vue'

const navigateToMock = vi.fn()

it('点击提交后跳转到指定路径', async () => {
  const wrapper = mount(Form, {
    global: {
      mocks: {
        navigateTo: navigateToMock
      }
    }
  })

  await wrapper.find("[data-testid='login']").trigger('submit')
  await flushPromises()

  expect(navigateToMock).toHaveBeenCalledWith('/')
})

关键注意事项 #

• 修正组件中的函数定义：原onClick函数使用了await但未声明async，会导致运行错误，需要修正：

// Form.vue
const onClick = async () => { // 新增async关键字
  await navigateTo('/')
}

• 确保表单的submit事件正确绑定到onClick，比如在模板中添加@submit.prevent="onClick"，避免触发页面默认刷新行为。

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