如何在 Vuejs 中测试受保护的路由保护的访问？

Posted 2023-02-22

【中文标题】如何在 Vuejs 中测试受保护的路由保护的访问？

【英文标题】：How to test the access of protected route guard with in Vuejs?

【发布时间】：2020-02-10 21:08:46

【问题描述】：

我用vue-router方法beforeEnter()实现了一个路由保护来保护/settings路由。

我尝试测试该路由是否仅限管理员使用。

我正在使用 Vuejs 2、Vue-router、Vuex 和 vue-test-utils。

router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router(
  routes: [
    ..., // other routes
    
      path: '/settings',
      name: 'Settings',
      component: () => import('./views/settings'),
      beforeEnter: (to, from, next) => 
        next(store.state.isAdmin);
      
    
  ]
);

单元测试：

  test('navigates to /settings view if the user is admin', () => 
    const localVue = createLocalVue();
    localVue.use(Vuex);
    localVue.use(VueRouter);
    const router = new VueRouter();

    const wrapper = shallowMount(App, 
      stubs: ['router-link', 'router-view'],
      localVue,
      mocks: 
        $store: store
      ,
      router
    );
    wrapper.vm.$route.push( path: '/settings' );
    // test if route is set correctly
  );

当前日志输出：

wrapper.vm.$route` 未定义。

如何正确挂载App并访问路由器？如何测试当前路由以验证 admin 用户是否已成功重定向？

【问题讨论】：

github.com/mcibique/… 没有完全回答您的问题，但会为您指明方向

【参考方案1】：

感谢洛根link。这似乎是最好的解决方案：

到目前为止，还没有简单的方法来测试导航守卫。如果你想通过调用router.push函数来模拟事件触发，你将很难。一个更好更简单的解决方案是在beforeEach() 中手动调用警卫，但即使这个解决方案也没有干净的方法。请参阅以下示例：

beforeRouteEnter

// my-view.js
class MyView extends Vue 
  beforeRouteEnter (to, from, next) 
    next(function (vm) 
      vm.entered = true;
    );
  

// my-view.spec.js
it('should trigger beforeRouteEnter event', function () 
  const view = mount(MyView);
  const spy = sinon.spy(view.vm.$options.beforeRouteEnter, '0'); // you can't just call view.vm.beforeRouteEnter(). The function exists only in $options object.

  const from = ; // mock 'from' route
  const to = ; // mock 'to' route
  view.vm.$options.beforeRouteEnter[0](to, from, cb => cb(view.vm));

  expect(view.vm.entered).to.be.true;
  expect(spy).to.have.been.called;
);

【讨论】：

也为我工作。也许还有一个补充：如果您还想测试是否调用了ǹext，那么您需要用一个模拟函数包装它：const next = jest.fn(cb => cb(wrapper.vm));。断言：expect(next).toHaveBeenCalled();

@mrp 你没有错误 TypeError: cb is not a function 吗？