DEV Community

Ahmet Eren Yatkın
Ahmet Eren Yatkın

Posted on

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 ?

Top comments (0)