How do I test routing guards in Vue.js?

How do I test routing guards in Vue.js?

To test routing guards in Vue.js, you can use Vue Test Utils along with a testing framework like Jest. You can mock the router and check if the guards behave as expected.

Can you show me a code example for that?

Sure! Here's a simple example:

import { createRouter, createWebHistory } from 'vue-router';
import { mount } from '@vue/test-utils';

const routes = [
  { path: '/protected', component: ProtectedComponent, beforeEnter: guard },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

test('should navigate to protected route if guard allows', async () => {
  const wrapper = mount(App, { global: { plugins: [router] } });
  await router.push('/protected');
  expect(wrapper.html()).toContain('Protected Component');
});

This tests if the routing guard allows access to the protected route.

What if the guard denies access?

If the guard denies access, you can test that the user is redirected to a different route. You can modify the test to check for that redirection.

Thanks! This is really helpful.