在使用 Vue 开发前端应用时，路由跳转是非常常见的功能，而在进行单元测试时，也需要对路由跳转这一功能进行测试。本文将介绍使用 Jest 测试 Vue 组件中路由跳转的正确姿势。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。Vue Router 可以非常方便地实现在不同路由之间进行跳转、传递参数等功能。
Jest 简介
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，具有零配置、易于上手、高效快速的特点。它可以进行单元测试、集成测试等多种类型的测试，也可以很好地与 Vue.js 集成。
测试路由跳转
在进行路由跳转的测试之前，需要先安装相关的依赖：
npm install vue-router vue-test-utils -D
Vue Router 提供了一些辅助函数来测试路由跳转，其中包括 $route.path、 $route.query 等等。我们可以将这些方法与 Jest 的 API 结合使用，通过断言判断路由是否跳转到了指定的页面。
下面我们来看一个具体的例子，假设我们有一个名为 App.vue 的 Vue 组件，在这个组件中有一个 router-link 组件，点击后可以跳转到 About.vue 组件。我们想要测试当点击 router-link 后是否成功跳转到了 About.vue 组件，测试代码如下：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------
------ - ------------- ---------------- - ---- ------------
------ --- ---- -----------
------ ----- ---- -------------------
------------------- -- -- -
----- ------ - --------------
-------- -------------------
------- -
- ----- --- ---------- --- --
- ----- --------- ---------- ----- --
--
--
----- ------- - ----------------- -
------- -
-------- ---------
--
--
---------- -------- -- ----- ---- -- ---- ------- ----- -- -- -
----------------
----- ----------------
----- --------- - ----------------------- ----- ------------- --
----- --------------------------
---------------------------------------------
--
--在这个测试用例中，我们首先创建了一个 Vue Router 的实例，然后将这个实例作为参数传入 shallowMount 方法中初始化 App.vue 组件。接着我们模拟用户点击 router-link 组件，使用 expect 判断当前路由路径是否为 '/about'。如果测试通过，则说明路由跳转功能正常。
小结
本文介绍了使用 Jest 测试 Vue 组件中路由跳转的正确姿势。通过使用 Vue Router 提供的辅助函数，结合 Jest 的 API 的特性，可以方便地进行路由跳转的测试。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67822db4935627c900fb4904
