Vue 3中如何在Jest测试中Mock vue-router的useRoute()？

我之前也碰到过一模一样的坑！你的组件代码本身没问题，但Vue 3的setup语法下，useRoute()是在计算属性的回调里被调用的，之前的Mock方式没踩对时机，导致路由对象始终返回undefined，才抛出了Cannot read property 'name' of undefined的错误。下面是我验证过的可行方案：

问题根源 #

你之前用mockReturnValueOnce()的问题在于：计算属性的getter会在组件渲染时触发，如果mock的返回值设置时机不对，或者没有正确重置mock状态，就会导致useRoute()返回undefined，进而触发报错。

正确的Mock步骤 #

1. 全局Mock vue-router模块 #

在测试文件最顶部，通过jest.mock把vue-router的useRoute模拟成一个可控制的Jest mock函数：

import { mount } from '@vue/test-utils';
import { useRoute } from 'vue-router';
import YourComponent from './YourComponent.vue';

// 全局Mock vue-router，让useRoute成为可自定义返回值的mock函数
jest.mock('vue-router', () => ({
  useRoute: jest.fn(),
}));

2. 在测试用例中动态设置Mock返回值 #

因为计算属性是响应式的，且useRoute()是在它的getter里被调用的，一定要在渲染组件之前设置好mock的返回值。同时为了避免测试用例之间互相干扰，记得在beforeEach里重置mock：

describe('YourComponent', () => {
  beforeEach(() => {
    // 重置mock，清除之前的调用记录和返回值，保证测试用例独立性
    (useRoute as jest.Mock).mockReset();
  });

  it('路由为Home时，不添加grey-background类', () => {
    // 先设置mock返回Home路由对象
    (useRoute as jest.Mock).mockReturnValue({ name: 'Home' });
    // 再渲染组件
    const wrapper = mount(YourComponent);
    expect(wrapper.classes()).not.toContain('grey-background');
  });

  it('路由非Home时，添加grey-background类', () => {
    (useRoute as jest.Mock).mockReturnValue({ name: 'About' });
    const wrapper = mount(YourComponent);
    expect(wrapper.classes()).toContain('grey-background');
  });
});

注意：TypeScript环境下需要用(useRoute as jest.Mock)做类型断言，否则TS会认为useRoute不是mock函数，无法调用mockReturnValue这类方法。

3. 为什么之前的方法无效？ #

你之前的写法失效大概率是这两个原因：

• mockReturnValueOnce()是一次性返回值，如果组件渲染过程中有其他隐式调用useRoute()的地方，这个返回值会被提前消耗
• 没有重置mock状态，前一个测试用例的mock残留影响了当前用例的执行

完整测试代码示例 #

整合后的完整测试文件如下：

import { mount } from '@vue/test-utils';
import { useRoute } from 'vue-router';
import YourComponent from './YourComponent.vue';

jest.mock('vue-router', () => ({
  useRoute: jest.fn(),
}));

describe('YourComponent', () => {
  beforeEach(() => {
    (useRoute as jest.Mock).mockReset();
  });

  it('识别Home路由，不应用灰色背景类', () => {
    (useRoute as jest.Mock).mockReturnValue({ name: 'Home' });
    const wrapper = mount(YourComponent);
    expect(wrapper.find('div').classes()).not.toInclude('grey-background');
  });

  it('识别非Home路由，应用灰色背景类', () => {
    (useRoute as jest.Mock).mockReturnValue({ name: 'OtherPage' });
    const wrapper = mount(YourComponent);
    expect(wrapper.find('div').classes()).toInclude('grey-background');
  });
});

这样修改后，你的测试用例应该就能正常运行，不会再抛出路由对象undefined的错误了。

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