使用 Vue.js 和 Jest 进行 URL 重定向测试
Posted
技术标签:
【中文标题】使用 Vue.js 和 Jest 进行 URL 重定向测试【英文标题】:URL redirection testing with Vue.js and Jest 【发布时间】:2018-07-31 00:55:27 【问题描述】:我正在尝试编写一个测试来检查当用户单击“登录”按钮时,URL 是否被重定向到 /auth/
。前端是用 Vue.js 编写的,测试是用 Jest 完成的。
这是 Vue 组件重定向的方式(来自UserLogged.vue
)。它可以在浏览器中运行。
export default
name: 'UserLogged',
props: ['userName'],
methods:
login: function (event)
window.location.href = '/auth/'
这是测试它的尝试:
import Vue from 'vue'
import UserLogged from '@/components/UserLogged'
describe('UserLogged.vue', () =>
it('should redirect anonymous users to /auth/ when clicking on login button', () =>
const Constructor = Vue.extend(UserLogged)
const vm = new Constructor().$mount()
const button = vm.$el.querySelector('button')
// Simulate click event
// Note: the component won't be listening for any events, so we need to manually run the watcher.
const clickEvent = new window.Event('click')
button.dispatchEvent(clickEvent)
vm._watcher.run()
expect(window.location.href).toEqual('http://testserver/auth/')
)
)
测试输出给出"http://testserver/"
,而不是预期的"http://testserver/auth"
。
【问题讨论】:
【参考方案1】:在https://forum.vuejs.org/t/url-redirection-testing-with-vue-js-and-jest/28009/2987654321@的帮助下,我可以很好地运行测试
这是最后的测试(现在用@vue/test-utils
lib 编写):
import mount from '@vue/test-utils'
import UserLogged from '@/components/UserLogged'
describe('UserLogged.vue', () =>
it('should redirect anonymous users to /auth/ when clicking on login button', () =>
const wrapper = mount(UserLogged)
const button = wrapper.find('button')
window.location.assign = jest.fn() // Create a spy
button.trigger('click')
expect(window.location.assign).toHaveBeenCalledWith('/auth/');
)
)
顺便说一句,我不得不将 components/UserLogged.vue
中的 window.location.href = '/auth/'
更改为 window.location.assign('/auth/')
。
【讨论】:
以上是关于使用 Vue.js 和 Jest 进行 URL 重定向测试的主要内容,如果未能解决你的问题,请参考以下文章
使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”