unit-testing - Vue.js vue-router 无论如何都要测试导航守卫？

Question

有什么方法可以在路由器文件中对导航守卫进行单元测试吗？

找不到关于此主题的任何帖子或链接...欢迎提示、技巧或反馈..

这里是 router/index.js ，我想测试 router.beforeEach()

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '@/pages/HomePage'
    import Login from '@/pages/LoginPage'
    import ShoppingLists from '@/pages/ShoppingListsPage'

    import vueAuthInstance from '../services/auth.js'

    Vue.use(VueRouter)

    const router = new VueRouter({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          meta: { auth: false, title: 'Home' }
        },
        {
          path: '/login',
          name: 'login',
          component: Login,
          meta: { auth: false, title: 'Login' }
        },
        {
          path: '/shoppinglists',
          name: 'shoppinglists',
          component: ShoppingLists,
          meta: { auth: true, title: 'Shopping Lists' }
        },
        {
          path: '/logout',
          name: 'logout'
        }
      ]
    })

    router.beforeEach(function (to, from, next) {
      if (to.meta && to.meta.title) {
        document.title = to.meta.title
      }
      if (to.meta && to.meta.auth !== undefined) {
        if (to.meta.auth) {
          if (vueAuthInstance.isAuthenticated()) {
            next()
          } else {
            router.push({ name: 'login' })
          }
        } else {
          next()
        }
      } else {
        next()
      }
    })

    export default router

Answer 1

我找到了一种方法，导入路由器并使用简单的 router.push) 进行导航。我还需要对 vueAuthInstance 进行 stub 以对请求进行身份验证

import VueRouter from 'vue-router'
import Vue from 'vue'

import sinon from 'sinon'

import router from '@/router/index'
import vueAuthInstance from '@/services/auth.js'

Vue.use(VueRouter)

describe('Router', () => {
  let sandbox

  beforeEach(() => {
    sandbox = sinon.sandbox.create()
    router
  })
  afterEach(() => {
    sandbox.restore()
  })

  it('should be in history mode', () => {
    sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
    expect(router.mode).to.eql('history')
  })

  it('should be able to navigate without authentication', () => {
    sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
    router.push('/')
    expect(router.history.current.path).to.eql('/')
    expect(router.getMatchedComponents('/')[0].name).to.eql('HomePage')
    router.push('/login')
    expect(router.history.current.path).to.eql('/login')
    expect(router.getMatchedComponents('/login')[0].name).to.eql('LoginPage')
  })

  it('should not be able to navigate to protected page when not authenticated', () => {
    sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
    router.push('/shoppinglists')
    expect(router.history.current.path).to.eql('/login')
    expect(router.getMatchedComponents('/login')[0].name).to.eql('LoginPage')
  })

  it('should be able to navigate to protected page when authenticated', () => {
    sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(true)
    router.push('/shoppinglists')
    expect(router.history.current.path).to.eql('/shoppinglists')
    expect(router.getMatchedComponents('/shoppinglists')[0].name).to.eql('ShoppingListPage')
  })

  it('should be able to navigate to unprotected page when authenticated', () => {
    sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(true)
    router.push('/home')
    expect(router.history.current.path).to.eql('/home')
    expect(router.getMatchedComponents('/')[0].name).to.eql('HomePage')
  })
})