如何使用 Vue 测试库测试 Vue Router 导航守卫？答案

【问题标题】：How to test Vue Router's navigation guards using Vue Testing Library?如何使用 Vue 测试库测试 Vue Router 导航守卫？
【发布时间】：2021-06-23 03:35:01
【问题描述】：

我想在我的 Vue 2 项目中测试 Vue Router 的“beforeRouteUpdate”和“beforeRouteLeave”导航守卫。

尽管存在许多关于如何使用 Vue 测试实用程序测试它们的答案，但我无法找到如何使用 Vue 测试库来做到这一点。在这些答案中（对于 Vue Test Utils），他们建议通过

wrapper.vm.$options.beforeRouteUpdate[0]

不幸的是，Vue 测试库中似乎有 the wrapper is not exposed，所以我卡住了。

那么...使用 Vue 测试库测试 Vue Router 的导航守卫的正确方法是什么？或者我应该为此目的使用 Vue Test Utils？

【问题讨论】：

标签： vue.js vuejs2 vue-router testing-library vue-testing-library

【解决方案1】：

谈谈测试库：

他们希望您专注于测试用户观察到的组件的输出和功能，并避免担心组件的实现细节。

如果你真的想测试诸如路由器、名称、mixin 之类的东西，你应该使用 Test utils。但你可以同时使用两者 =)

你可以在这里看到这个：

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

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

【讨论】：

嗯，我同意“包装器”是一个实现细节，但我想说导航守卫不是一个实现细节，应该对其进行测试。无论如何，谢谢你的回答！我会按照你的建议使用 Test Utils。