如何在Vuejs中测试受保护路由保护的访问？
如何在Vuejs中测试受保护路由保护的访问？
提问于 2019-10-14 09:06:09
我用vue-路由器方法beforeEnter()实现了一个保护beforeEnter()路由的路由保护。
--我试着测试该路由是否只对进行了保护。
我使用Vuejs 2，vue-路由器，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
});当前日志输出：
$route``未定义。
如何正确挂载应用程序并访问路由器？如何测试当前路由以验证管理员用户是否已成功地被重定向？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-06 12:02:24
感谢洛根的链接。这似乎是最好的解决方案：
到目前为止，还没有一种简单的方法来测试导航警卫。如果您想通过调用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;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58373435
复制相关文章
相似问题
腾讯云开发者
