vuejs2 - 如何在RouteUpdate导航守卫之前测试vue路由器?

标签 vuejs2 jestjs vue-router vue-test-utils

首先,我使用的是 Vue-property-decorator。 我的组件有一个组件路由,定义如下。

@Component({
  components: {
    ComponentA,
    ComponentB
  },
  beforeRouteUpdate (to, _from, next) {
    const { checkInDate, checkOutDate, items, currency, locale } = to.query;
    const queryFullfilled = !!checkInDate && !!checkOutDate && !!items.length && !!currency && !!locale;

    if ([BOOKING_PAGE, RESERVATION_PAGE].indexOf(to.name) > -1 && queryFullfilled) {
      this.validateRooms();
    }
    next();
  }
})
export default class Layout extends Vue {}

我需要在规范中做什么才能涵盖 beforeRouteUpdate 中发生的情况?我用谷歌搜索了这个,人们指出调用 wrapper.vm.$options.beforeRouteUpdate.call()... 这对我不起作用。

以前有人这样做过吗?我可以查看任何代码示例吗?

提前致谢。 约翰。

最佳答案

如果有人仍在寻找答案,以下代码将起作用。

const beforeRouteUpdate = wrapper.vm.$options.beforeRouteUpdate[0];
let nextFun = jest.fn();

// in place wrapper.vm you can send any object you want bcz when we call beforeRouteUpdate it looses this context

beforeRouteUpdate.call(wrapper.vm , "toObj", "fromObj", nextFun); 

how to call beforeRouteUpdate github

关于vuejs2 - 如何在RouteUpdate导航守卫之前测试vue路由器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57086938/

相关文章:

javascript - 当用户信息来自异步函数时实现 vue.js 路由器保护

javascript - 如何从另一个js文件调用vue组件方法

vue.js - 检测浏览器关闭或页面更改 VueJs

reactjs - 如何使用回调测试 React ref?

reactjs - 开 Jest 测试: custom currency/decimal formatters showed wrong delimiters

javascript - 如何从 nuxt 路由器模块的 router.js 文件访问 Vuex 存储?

vue.js - 如何确定导致组件重新渲染的原因

javascript - 在组件内嵌套 Vue 组件时出现问题

reactjs - React 和 Jest - 使用 PropTypes.instanceOf 测试组件

apache - apache上的vue-router,子目录下的SPA,只能通过redirect访问页面