Vitest模拟@inertiajs/vue3的usePage测试异常，求解决方法

我正在为VueJS应用编写测试用例，其中一个组件使用了Inertia的usePage，组件代码如下：

import { usePage } from '@inertiajs/vue3';
const page = usePage();
const path = computed(() => {
  return page.url.includes('test-url');
});

测试文件中模拟usePage的代码如下：

vi.mock('@inertiajs/vue3', () => ({
  __esModule: true,
  ...vi.importActual('@inertiajs/vue3'),
  usePage: () => ({
    url: '/test-url'
  })
}));

运行测试时出现错误：TypeError: Cannot read properties of undefined (reading 'includes') in page.url.includes('test-url');

期望usePage的模拟值能传递到组件中，即page.url应为/test-url，请问如何解决该问题？

1. 确保Mock在组件导入前执行 #

vi.mock会被Vitest自动提升到文件顶部，但如果手动调整代码顺序导致组件导入在Mock之前执行，组件会加载真实的usePage而非模拟版本。请将Mock代码放在测试文件最开头，确保在导入目标组件前完成Mock：

// 测试文件最顶部
import { vi } from 'vitest';
import { reactive } from 'vue';

vi.mock('@inertiajs/vue3', () => ({
  __esModule: true,
  ...vi.importActual('@inertiajs/vue3'),
  usePage: () => reactive({
    url: '/test-url'
  })
}));

// 之后再导入组件
import MyComponent from './MyComponent.vue';

// 编写测试逻辑
test('组件路径判断正确', () => {
  // ...测试代码
});

2. 匹配Inertia返回值的响应式特性 #

Inertia的usePage原生返回Vue响应式对象，用reactive包裹模拟返回值可以完全匹配原生行为，避免潜在的响应式相关问题。

3. 验证Mock是否生效 #

可以在测试中添加简单验证，确认Mock是否正确执行：

import { usePage } from '@inertiajs/vue3';

test('usePage模拟生效', () => {
  const page = usePage();
  expect(page.url).toBe('/test-url');
});

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