How to test vue router beforeRouteUpdate navigation guard?

问题

First off, I'm using Vue-property-decorator. My component has a component route, defined like this.

@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 {}

What do I need to do in my specs in order to cover what goes on in beforeRouteUpdate? I've googled this and people are pointing calling wrapper.vm.$options.beforeRouteUpdate.call()... that didn't work for me.

Has anyone done this before? Any code samples I can look at?

Thanks in advance. John.

回答1:

If anyone still looking for an answer following code will work.

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

来源：https://stackoverflow.com/questions/57086938/how-to-test-vue-router-beforerouteupdate-navigation-guard