Vitest全局Mock的route函数模板可用，脚本中提示未定义？

原因分析 #

• Vitest 配置的 config.global.mocks 仅会注入到 Vue 组件的模板渲染上下文中，所以模板里调用 route() 能正常识别。
• 组件 <script> 部分（包括 setup 内的方法）属于独立的 JavaScript 执行上下文，Vitest 不会自动将 mock 的变量注入到这里，直接调用 route 自然会报未定义错误。

解决办法 #

推荐以下几种方案：

1. 显式导入 Ziggy 的 route 函数
   如果测试环境可以直接引入 Ziggy，在组件的 script 里直接导入：

import { route } from 'ziggy-js';

之后在 submit 方法里直接使用即可，无需依赖全局 mock。

2. 在测试文件中手动挂载全局变量
   在测试文件的前置代码（比如 beforeEach 或文件顶部）添加：

global.route = (name) => route(name, undefined, undefined, Ziggy);

这样组件 script 里的 route 就会指向这个全局定义的 mock 函数。

3. 配置 Vue 全局属性（替代仅用 Vitest mocks）
   修改 Vitest 配置，把 route 挂载到 Vue 的全局属性上，这样不管模板还是 script 都能访问：

config.global.properties.route = (name) => route(name, undefined, undefined, Ziggy);

在 Vue 3 的 setup 中，可以通过 getCurrentInstance 获取全局属性：

import { getCurrentInstance } from 'vue';

const appContext = getCurrentInstance()?.appContext;
const route = appContext?.config.globalProperties.route;

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