DEV Community

Ahmet Eren Yatkın
Ahmet Eren Yatkın

Posted on

1 2

VueJS Testing Nested Routes

Hello, I have an app that has bunch of sub routes and I want to test that they are rendered without an error.

router.spec.js

import { mount, createLocalVue } from "@vue/test-utils"
import App from "@/App.vue"
import VueRouter from "vue-router"
import Fullpage from "@/layouts/full-page/FullPage.vue"
import routes from "@/router/routes.js"

const localVue = createLocalVue()
localVue.use(VueRouter)


describe("App", () => {
  it("renders a child component via routing", () => {
    const router = new VueRouter({ routes })
    const wrapper = mount(App, { 
      localVue,
      router,
      stubs: ['vx-card']
    })

    router.push("/pages/login");
    expect(wrapper.find(Fullpage).exists()).toBe(true)
  })
})

expect(wrapper.find(Fullpage).exist()) returns false.

routes.js

// Routes.js
export default [
  {
    // =============================================================================
    // MAIN LAYOUT ROUTES
    // =============================================================================
    path: '',
    component: () => import('../layouts/main/Main.vue'),
    children: [
      // =============================================================================
      // Theme Routes
      // =============================================================================
      {
        path: '/',
        name: 'Home',
        component: () => import('../views/system/Home.vue'),
        meta: { requiresAuth: true, abKey: 'getHome1' }, //! Prevent public access and check if user has access rights or not
      },
      {
        path: '/page2',
        name: 'page2',
        component: () => import('../views/Page2.vue'),
        meta: { requiresAuth: true, abKey: 'postCreate1' },
      },
      {
        path: '/admin',
        name: 'Admin',
        component: () => import('../views/admin/index.vue'),
        meta: { requiresAuth: true, abKey: 'adminMain' },
      },
    ],
  },
  // =============================================================================
  // FULL PAGE LAYOUTS
  // =============================================================================
  {
    path: '',
    component: () => import('@/layouts/full-page/FullPage.vue'),
    children: [
      // =============================================================================
      // PAGES
      // =============================================================================
      {
        path: '/pages/login',
        name: 'pageLogin',
        component: () => import('@/views/system/Login.vue'),
      },
      {
        path: '/pages/error-404',
        name: 'pageError404',
        component: () => import('@/views/system/Error404.vue'),
      },
    ],
  },
  // Redirect to 404 page, if no match found
  {
    path: '*',
    redirect: '/pages/error-404',
  },
];

Can anyone help ?

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay