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?

Luiz Eduardo Araujo · Accepted Answer · 2022-01-10 19:54:49Z

2

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/

answered Jan 10, 2022 at 19:54

Luiz Eduardo Araujo

814 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

whale9490 Over a year ago

Hmm, I agree that the 'wrapper' is an implementation detail, but I'd want to say navigation guards are not an implementation detail, and they should be tested. Anyways, thanks for the answer! I'll use Test Utils as you suggestted.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related