How to test Vue Router's navigation guards using Vue Testing Library?

Question

I want to test Vue Router's "beforeRouteUpdate" and "beforeRouteLeave" navigation guards in my Vue 2 project.

Although many answers exist about how to test them with Vue Test Utils, I could not find how to do that with Vue Testing Library. In those answers (for Vue Test Utils), they suggest getting the function by

wrapper.vm.$options.beforeRouteUpdate[0]

Unfortunately, it seems the wrapper is not exposed in Vue Testing Library, so I got stuck.

So... what is the right way to test Vue Router's navigation guards using Vue Testing Library? Or should I use Vue Test Utils for that purpose?

Answer 1

Talking about testing library:

They want you to focus on testing the output and functionality of the component as it is observed by the user and to avoid worrying about the implementation details of the component.

Then if you really want to test things like router, name, mixins you should use Test utils. But you can use both together =)

You can see this here:

https://testing-library.com/docs/dom-testing-library/faq/

https://testing-library.com/docs/guiding-principles/