Vue应用单元测试：如何Mock beforeCreate或$session.exists？Sinon尝试未果

这个问题在Vue单元测试里挺常见的——测试环境不会自动提供你项目里自定义的全局对象（比如$session），所以咱们得手动给组件提供一个mock版本。结合Sinon，我给你两种靠谱的解决方案：

方案一：全局挂载Mock的$session（适合多测试用例复用） #

如果你的多个测试都需要用到$session，可以在测试文件开头把mock对象挂载到Vue原型上，让所有组件实例都能继承它：

import Vue from 'vue';
import sinon from 'sinon';
import YourComponent from '@/components/YourComponent.vue';

// 测试前全局注入mock的$session
beforeEach(() => {
  // 用Sinon创建stub的exists方法，可按需设置返回值
  const sessionStub = {
    exists: sinon.stub().returns(false) // 默认模拟未登录状态
  };
  Vue.prototype.$session = sessionStub;
});

// 测试后清理全局挂载，避免影响其他测试
afterEach(() => {
  delete Vue.prototype.$session;
});

// 编写测试用例
describe('YourComponent', () => {
  it('should redirect to "/" when session does not exist', () => {
    const $router = { push: sinon.stub() };
    mount(YourComponent, {
      mocks: {
        $router // 同时mock $router，因为组件里用到了push方法
      }
    });
    // 断言路由跳转被触发
    expect($router.push.calledWith('/')).to.be.true;
  });
});

方案二：通过Vue Test Utils的mocks选项注入（单测试用例定制） #

如果只是某个测试用例需要，直接在mount或shallowMount时传入mocks选项，灵活性更高：

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

describe('YourComponent', () => {
  it('should not redirect when session exists', () => {
    const $router = { push: sinon.stub() };
    const $session = { exists: sinon.stub().returns(true) }; // 模拟已登录状态

    mount(YourComponent, {
      mocks: {
        $session,
        $router
      }
    });

    // 断言路由跳转未被触发
    expect($router.push.called).to.be.false;
  });
});

关键注意事项 #

• 因为beforeCreate是在组件实例创建之前执行的，所以必须保证mock的$session在组件实例化前就已注入——上面两种方法都能满足这个要求：全局挂载在beforeEach中提前执行，mocks选项会在mount时优先注入。
• 如果你需要测试不同分支逻辑，直接修改Sinon stub的返回值即可，比如$session.exists.returns(true)，就能快速切换登录状态的测试场景。

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