Javascript 使用JEST对Vue.js路由器进行单元测试-如何模拟页面?
我正在尝试对我的路由器路由进行单元测试,并根据各种示例,提出了一些测试用例。我已经将我的路由器分为单独的模块,用于路由、防护和路由器本身,以使其更易于测试,因此我实际上只是在这里测试路由定义。这是我的路线样本Javascript 使用JEST对Vue.js路由器进行单元测试-如何模拟页面?,javascript,vuejs2,jestjs,Javascript,Vuejs2,Jestjs,我正在尝试对我的路由器路由进行单元测试,并根据各种示例,提出了一些测试用例。我已经将我的路由器分为单独的模块,用于路由、防护和路由器本身,以使其更易于测试,因此我实际上只是在这里测试路由定义。这是我的路线样本 import Guards from './guards' import Views from '@/views' export default [ { path: '/', props: true, components: {
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()
})
})
*/
})
有什么想法吗?我对Vue的玩笑和单元测试非常陌生——我以前对Jasmine和Mocha/Chai/Sinon有过更多的经验。最后我自己解决了这个问题。答案不是书页,而是对我的警卫的嘲笑(当你看到这一点时很简单)。而不是这个
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()
})
}))
因为,如果没有“next”函数来调用mock-guard,则会命中该节点,然后路由不会执行到该点之外。“next”调用需要实际通过路由的渲染
“Welcome”(欢迎)始终显示为登录页,因此在警卫失败时默认返回