Vue 3组合式API中如何Mock route对象？

当测试代码里访问route.x时出现TypeError: Cannot read properties of undefined，本质是route对象未被正确初始化或注入到测试上下文里。你当前的Mock思路是对的，但需要结合具体测试场景调整实现方式，确保Mock的对象能被代码正确识别：

场景1：Vue组件测试（Vue Test Utils/Vitest） #

Vue组件中是通过this.$route访问路由对象的，所以Mock时要对应到$route：

import { mount } from '@vue/test-utils';
import TargetComponent from '@/components/TargetComponent.vue';

// 按需添加测试需要的路由属性
const mockRoute = {
  fullPath: '/',
  path: '/',
  params: { id: 'test-id' },
  query: { keyword: 'demo' }
};

describe('TargetComponent', () => {
  it('渲染时无路由相关错误', () => {
    const wrapper = mount(TargetComponent, {
      global: {
        mocks: {
          $route: mockRoute
        }
      }
    });
    
    // 这里可以添加组件渲染或逻辑的断言
    expect(wrapper.find('.path-display').text()).toBe('/');
  });
});

场景2：纯JS/TS函数测试（Jest/Vitest） #

如果是测试依赖route对象的工具函数，直接在测试作用域内定义Mock对象并传入函数即可：

import { getCurrentPath } from '@/utils/route-utils';

// 每个测试用例前重置Mock对象，避免用例间污染
let mockRoute;
beforeEach(() => {
  mockRoute = {
    fullPath: '/user/profile',
    path: '/user/profile'
  };
});

test('getCurrentPath能正确返回路由路径', () => {
  const result = getCurrentPath(mockRoute);
  expect(result).toBe('/user/profile');
});

// 如果函数是直接导入route对象，用jest.mock替换模块
jest.mock('@/utils/route', () => ({
  route: {
    fullPath: '/',
    path: '/'
  }
}));

关键注意事项 #

• 按需Mock属性：如果测试代码里用到了route.params或route.query，一定要在Mock对象里补充这些属性，不然会出现新的undefined错误
• 避免冗余Mock：只Mock测试逻辑需要的属性，没必要完全复制真实路由对象的所有字段
• 作用域隔离：在beforeEach里初始化Mock对象，保证每个测试用例的Mock状态独立

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