使用 JEST 对 Vue.js 路由器进行单元测试 - 如何模拟页面？

Question

我正在尝试对我的路由器路由进行单元测试，并且根据各种示例，我提出了一些测试用例。我已将路由器分成单独的模块，用于路由、防护和路由器本身，以使其更易于测试，因此我实际上只是在这里测试路由定义。这是我的路线示例...

import Guards from './guards'
import Views from '@/views'

export default [
    {
        path: '/',
        props: true,
        components: {
            default: Views.Pages.Wizard,
            header: Views.Headers.Wizard
        },
        children: [
            {
                path: '',
                name: 'Welcome',
                component: Views.Welcome
            },
            {
                path: 'verify-guest',
                name: 'ReCaptcha',
                component: Views.ReCaptcha
            }
        ]
    },
    {
        path: '/:postcode/:id/:address',
        props: true,
        components: {
            default: Views.Pages.Main,
            header: Views.Headers.Main
        },
        children: [
            {
                path: '',
                name: 'MyHome',
                props: true,
                component: Views.MyHome,
                beforeEnter: Guards.requireSelectedProperty
            },
            {
                path: 'improvements',
                name: 'Improvements',
                props: true,
                component: Views.Improvements,
                beforeEnter: Guards.requireSelectedProperty
            }
        ]
    }
]

我已经编写了一些测试，并且加载加载页面（欢迎）的测试通过了，但我尝试的其他所有内容似乎都失败了 - 就好像路由器只加载登录页面一样。

测试看起来像这样......

import Helper from '../../test-helper'
import { mount, createLocalVue } from '@vue/test-utils'

import VueRouter from 'vue-router'

import App from '../../templates/app-bare.vue'
import Views from '@/views'

import routes from '@/router/routes.js'
import MockGuards from '@/router/guards.js'

jest.mock('@/router/guards.js', () => ({
    requireUser: jest.fn(),
    requireFullUser: jest.fn(),
    requireCurrentProject: jest.fn(),
    requireSelectedProperty: jest.fn()
}))

jest.mock('@/views/headers/main.vue', () => ({
    name: 'MainHeader',
    render: h => h('div')
}))

jest.mock('@/views/headers/wizard.vue', () => ({
    name: 'WizardHeader',
    render: h => h('div')
}))

jest.mock('@/views/welcome.vue', () => ({
    name: 'Welcome',
    render: h => h('span')
}))

jest.mock('@/views/my-home.vue', () => ({
    name: 'MyHome',
    render: h => h('section')
}))

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

describe('router', () => {
    let router
    let wrapper

    beforeEach(() => {
        router = new VueRouter({ base: '/', routes })
        wrapper = mount(App, {
            localVue,
            router,
            mocks: Helper.vueMockPlugins()
        })
    })

    describe('can load the landing page', () => {

        it('via a path', () => {
            router.push('/')
            expect(wrapper.find(Views.Welcome).exists()).toBeTruthy()
            expect(wrapper.find(Views.Headers.Wizard).exists()).toBeTruthy()
        })

        it('via a name', () => {
            router.push({ name: 'Welcome' })
            expect(wrapper.find(Views.Welcome).exists()).toBeTruthy()
            expect(wrapper.find(Views.Headers.Wizard).exists()).toBeTruthy()
        })
    })

    /*

    None of these work - can only ever make the router render 'Welcome'

    describe('can load the root of my home', () => {

        it('via a path', () => {
            router.push('/KT18%207LJ/1/3%20The%20Crescent/')
            console.log(wrapper.html())
            expect(wrapper.find(Views.MyHome).exists()).toBeTruthy()
            expect(wrapper.find(Views.Headers.Main).exists()).toBeTruthy()
        })

        it('via a name with parameters', () => {
            router.push({ name: 'MyHome', params: {
                id: 1,
                postcode: 'KT18 7LJ',
                address: '3 The Crescent'
            } })
            console.log(wrapper.html())
            expect(wrapper.find(Views.MyHome).exists()).toBeTruthy()
            expect(wrapper.find(Views.Headers.Main).exists()).toBeTruthy()
        })
    })

    */
})

有什么想法吗？我对 JEST 和 Vue 的单元测试非常陌生 - 我对 Jasmine 和 Mocha / Chai / Sinon 有更多的经验。

Answer 1

最后我自己解决了这个问题。答案不是书页，而是我的守卫的嘲笑（当你看到它时很简单）。而不是这个...

jest.mock('@/router/guards.js', () => ({
    requireUser: jest.fn(),
    requireFullUser: jest.fn(),
    requireCurrentProject: jest.fn(),
    requireSelectedProperty: jest.fn()
}))

我需要用这个替换它们......

jest.mock('@/router/guards.js', () => ({
    requireUser: jest.fn((_to, _from, next) => {
        next()
    }),
    requireCurrentProject: jest.fn((_to, _from, next) => {
        next()
    }),
    requireFullUser: jest.fn((_to, _from, next) => {
        next()
    }),
    requireSelectedProperty: jest.fn((_to, _from, next) => {
        next()
    })
}))

因为，如果没有“下一个”函数来调用模拟守卫，那么路线不会执行超出该点的操作。需要“下一个”调用才能真正完成路线的渲染。

“欢迎”似乎始终呈现，因为它是登陆页面，因此在防护失败时默认返回。

Answer 2

你好，你能告诉我助手“import Helper from '../../test-helper'”中有什么吗？谢谢