Question

首先，我正在使用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() ...对我不起作用。

有人做过吗？我可以看任何代码示例吗？

先谢谢了。约翰。

Answer 1

如果有人仍在寻找答案，则可以使用以下代码。

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

Answer 2

import component from '@/components/component'

const wrapper = shallowMount() 
// any additional setup

const to = {}
const from = {}
const next = jest.fn()
await component.beforeRouteLeave.call(wrapper.vm, to, from, next)

// asserts
expect(next).toHaveBeenCalledWith(false)

路由守卫可以通过组件类访问。传入实例的 vm 以便您可以访问 this .

您如何测试RouteUpdate之前发生的事情？

2 个答案: